vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

2024-03-20 09:17:51

本文实例讲述了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件。分享给大家供大家参考，具体如下：

v-on:click/mouseover......

简写的:

@click="" 推荐

事件对象:

@click="show($event)"

事件冒泡:

阻止冒泡:

a). ev.cancelBubble=true; b). @click.stop 推荐

默认行为(默认事件):

阻止默认行为:

a). ev.preventDefault();
b). @contextmenu.prevent 推荐

键盘:

@keydown $event ev.keyCode
@keyup

常用键:

回车

a). @keyup.13
b). @keyup.enter

上、下、左、右

@keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down
    .....

简写的: @click="" 推荐

<input type="button" value="按钮" v-on:click="show()">
<input type="button" value="按钮" @click="show()">

事件对象:@click="show($event)"

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev,b){
            alert(ev.clientX);
            alert(b);
          }
        }
      });
    };

<div id="box">
    <input type="button" value="按钮" @click="show($event,112)">
  </div>

事件冒泡

阻止冒泡:

a). ev.cancelBubble=true;

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(1);
            ev.cancelBubble=true;
          },
          show2:function(){
            alert(2);
          }
        }
      });
    };

<div id="box">
    <div @click="show2()">
      <input type="button" value="按钮" @click="show($event)">
    </div>
  </div>

b). @click.stop 推荐

<div id="box">
    <div @click="show2()">
      <input type="button" value="按钮" @click.stop="show()">
    </div>
  </div>

默认行为(默认事件):

阻止默认行为:

a). ev.preventDefault();

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(1);
            ev.preventDefault();//这里阻止了右击显示菜单的事件
          }
        }
      });
    };

<div id="box">
    <input type="button" value="按钮" @contextmenu="show($event)">
  </div>

b). @contextmenu.prevent 推荐

<div id="box">
    <input type="button" value="按钮" @contextmenu.prevent="show()">
  </div>

键盘事件:

@keydown $event ev.keyCode

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(ev.keyCode);
          }
        }
      });
    };

<div id="box">
    <input type="text" @keydown="show($event)">
  </div>

@keyup

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(ev.keyCode);
          }
        }
      });
    };

<div id="box">
    <input type="text" @keyup="show($event)">
  </div>

常用键:

1、回车

a). @keyup.13
b). @keyup.enter

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(){
            alert('您按回车了');
          }
        }
      });
    };

<div id="box">
  <!--<input type="text" @keyup.13="show()">-->
  <input type="text" @keyup.enter="show()">
</div>

2、上、下、左、右

@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(){
            alert("你按了左箭头←");
          }
        }
      });
    };

<div id="box">
    <input type="text" @keyup.left="show()">
  </div>

希望本文所述对大家vue.js程序设计有所帮助。

vue监听键盘事件的快捷方法【推荐】

在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些常用键,还提供了按键别名: <input @keyup.enter="submit">  全部的按键别名: .enter .tab .delete (捕获"删除"和"退格"键) .esc .s
vue绑定的点击事件阻止冒泡的实例

当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc
Vue键盘事件用法总结

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc
解决VUE框架导致绑定事件的阻止冒泡失效问题

前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self
详解vue事件对象、冒泡、阻止默认行为

整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet
重新认识vue之事件阻止冒泡的实现

冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div>
vue中阻止click事件冒泡,防止触发另一个事件的方法

使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部
解决vue 绑定对象内点击事件失效问题

突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
事件委托与阻止冒泡阻止其父元素事件触发

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <li data-id="119">洛杉矶&
C#编程实现对象与JSON串互相转换实例分析

本文实例分析了C#编程实现对象与JSON串互相转换的方法.分享给大家供大家参考,具体如下: DoNet2.0 需要借助于Newtonsoft.Json.dll 代码如下: using System; using System.IO; using System.Text; using Newtonsoft.Json; namespace OfflineAcceptControl.UCTools { public class JsonTools { // 从一个对象信息生成Json串 public
PHP对象相互引用的内存溢出实例分析

通常来说使用脚本语言最大的好处之一就是可利用其拥有的自动垃圾回收机制来释放内存.你不需要在使用完变量后做任何释放内存的处理,因为这些PHP会帮你完成. 当然,我们可以按自己的意愿调用 unset() 函数来释放内存,但通常不需要这么做. 不过在PHP里,至少有一种情况内存不会得到自动释放,即便是手动调用 unset().详情可考PHP官网关于内存泄露的分析:http://bugs.php.net/bug.php?id=33595. 问题症状如下: 如果两个对象之间存在着相互引用的关系,如"父对象
PHP获取对象属性的三种方法实例分析

本文实例讲述了PHP获取对象属性的三种方法.分享给大家供大家参考,具体如下: 今天查看yii源码,发现yii\base\Model中的attribute()方法是通过反射获取对象的public non-static属性.记得以前看到的代码都是用get_object_vars()这个函数获取的,昨天查看php文档,发现还可以用foreach遍历对象属性.于是写个例子练习下. class TestClass { private $a; protected $b; public $c; public
JavaScript内置对象math,global功能与用法实例分析

本文实例讲述了JavaScript内置对象math,global功能与用法.分享给大家供大家参考,具体如下: 学习要点: 1.Global对象 2.Math对象 ECMA-262对内置对象的定义是:"由ECMAScript实现提供的.不依赖宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在了."意思就是说,开发人员不必显示地实例化内置对象:因为它们已经实例化了.ECMA-262只定义了两个内置对象:Global和Math. 一．Global对象 Global(全局)对
Javascript 对象（object）合并操作实例分析

本文实例讲述了Javascript 对象(object)合并操作.分享给大家供大家参考,具体如下: 对象的合并需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返
Java对象的四种引用方式实例分析

本文实例讲述了Java对象的四种引用方式.分享给大家供大家参考,具体如下: 一点睛 Java语言对对象的引用有如下四种方式强引用:我们平时一般都是这种引用,当一个对象被一个或一个以上的引用变量所引用时,它处于可达状态,不可能被系统垃圾回收机制回收. 软引用:软引用需要通过SoftReference类来实现,当一个对象只具有软引用时,它有可能被垃圾回收机制回收.对于只有软引用的对象而言,当系统内存空间足够时,它不会被系统回收,程序也可以使用该对象,当系统内存空间不够时,系统可能回收它.软引用通
jQuery高级编程之js对象、json与ajax用法实例分析

本文实例讲述了jQuery高级编程之js对象.json与ajax用法.分享给大家供大家参考,具体如下: js对象创建js对象的两种方式: 1.通过new Object创建: var p1 = new Object(); // 设置属性,和方法 p1.name = "张三"; p1.age = 13; p1.study = function(){ console.log(p1.name + "正在学习,葵花宝典"); } // 调用属性和方法 console.log
JS对象和字符串之间互换操作实例分析

本文实例讲述了JS对象和字符串之间互换操作.分享给大家供大家参考,具体如下: 平时在工作中大家一定也有过这样的需求,就是有时候需要把一个json对象转换为字符串,有时候要把一个类似json对象的字符串转换为json对象,那么今天就来总结一下,js的方法 1. json对象转字符串这个API很简单就是 JSON.stringify() ,只需要把你要转换的对象写到括号里就行了,下面有一个小demo let json = { msg:"json转字符串", name:"前端林三
JavaScript对象拷贝与Object.assign用法实例分析

本文实例讲述了JavaScript对象拷贝与Object.assign用法.分享给大家供大家参考,具体如下: 深拷贝与浅拷贝在 JavaScript 中,对于基本数据类型(undefined.null.boolean.number.string)来说,在变量中存储的就是这个变量本身的值,复制是对值的复制,不存在深浅之说.但C系语言的共同特点中有,存储引用类型(对象),实际中在变量里存的是它的地址.因此对 JavaScript 中的复杂数据类型(object)来说,也会有浅拷贝和深拷贝的概念:浅

vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

相关推荐

随机推荐