vue事件(事件指令、事件对象、事件修饰符)

您所在的位置：网站首页 › vue表单修饰符 › vue事件(事件指令、事件对象、事件修饰符)

vue事件(事件指令、事件对象、事件修饰符)

2023-08-14 06:29| 来源: 网络整理| 查看: 265

vue事件

1、事件指令：两种写法：

(1) v-on:事件名.修饰符="执行的函数名或表达式"

(2) @事件名="执行的函数名或表达式"

注意:

(1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中

(2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。在普通js函数中，加小括号是调用此函数

(3) this指向: methods对象中的函数中，this指向的永远是当前vue实例对象，通过this可以访问methods中的函数

2、事件对象：用来记录一些事件发生时的相关信息的对象

事件可能是：

用户在某些内容上的点击鼠标经过某个元素按下键盘上的某些按键可能是web浏览器中发生的事情：某个web页面加载完成，或者是用户滚动窗口或改变窗口大小，等等。… vue中，事件绑定函数中的第一个参数默认是 event 对象当执行函数名后面带小括号或有其他参数时，执行后会是undefined，需要手动来传入$event，而模板中的$event的名字是固定死的(不能更改)

示例1如下，看看一下vue事件：

点我啊点我呀点我呀来呀来呀 // 当然先引入vue.js,可直接引用vue的网络地址，最好是下载到本地使用。 let app = new Vue({ //实例化vue对象 el:"#app", data:{ val:"存放数据的", num:0 }, // 通过内联方式绑定事件处理函数 // 函数都存放在methods中 methods:{ clickTest(){ console.log("你点击了"); console.log(this);//this指向当前vue实例对象，只要在Vue实例内的this都指向当前的vue实例对象 console.log(this.val);//获取data中val值 }, clickTest2(){ console.log("你也点击了"); console.log(this);//也指向当前vue实例对象 console.log(this.$data.val);//同样获取data中val的值 console.log(this.num++); //获取data中num的值，每点击一次按钮num自增1 }, clickTest3(ev){ console.log(this); // this同样指向当前vue示例 console.log(ev); // 执行后，在浏览器端可以看到ev输出的是MouseEvent对象 console.log("x:"+ev.clientX+" "+"y:"+ev.clientY);//获取鼠标距屏幕的距离 console.log(this.num--); // 这里也可以获取num的值，每点击按钮一次num自减1 } } });

再来做个练习，熟悉一下事件对象的用法，示例2如下：

{{user.name}} let app = new Vue({ el:"#app", data:{ users:[ { id:1,name:"tony" }, { id:2,name:"joe" }, { id:3,name:"tom" } ] }, methods:{ getUser(id,name,ev){ console.log(id+" "+name); } } });

3、事件修饰符我们在学习js事件函数时，我们使用 e.preventDefault()来阻止默认事件、 e.stopPropagation()来阻止事件冒泡，

其实，更好的方法是只有纯粹的数据逻辑，而不是去处理 DOM 事件的细节。 vue提供了事件修饰符，来更方便的，更好的去处理了这些问题。

修饰符是由点.开头的指令后缀来表示的。vue中提供的事件修饰符有： .stop 阻止事件冒泡 .prevent 阻止默认事件 .capture添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 .self只当在 event.target 是当前元素自身时触发处理函数，事件不是从内部元素触发的 .once点击事件将只会触发一次 .passive滚动事件的默认行为 (即滚动行为)，包括event.preventDefault()情况在内，将会立即触发，不会等待onScroll完成。此修饰符尤其能够提升移动端的性能不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。 .passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符在监听键盘事件时，Vue中可以在使用v-on监听键盘事件时添加按键修饰符： .enter vue提供了很多常用的按键码的别名，比如： .enter -->回车键 .tab -->tab切换键 .delete -->删除和退格键 .esc -->退出键 .space -->空格键 .up -->上键 .down -->下键 .left -->左键 .right -->右键

示例3如下，看看它们怎么用的吧！

点击2 我是来阻止事件冒泡的提交表单我要跳转点一点戳一戳我不点自己了全都不要点了你再点也只触发一次滚动吧小手一点 let app = new Vue({ el: "#app", data: {}, methods: { dvClick() { console.log("我点的是父级div"); }, btnClick() { console.log("我点的是父级div下的按钮"); }, doThis(){ console.log("触发doThis函数"); }, onSubmit(){ console.log("表单提交不再重载页面"); }, onJump(){ console.log("我就不让你跳"); }, doThat(){ console.log("触发doThat函数"); }, onScroll(){ conosle.log("滚来滚去"); }, enterSub(){ console.log("你不按回车我就不让你调用"); }, onPageDown(){ console.log("你不按下翻我也不让你调用"); }, clickEnter(){ console.log("你按得是回车键"); }, } });

【本文地址】

vue事件(事件指令、事件对象、事件修饰符)

vue事件(事件指令、事件对象、事件修饰符)

今日新闻

推荐新闻