本文详细介绍了Vue中的事件处理，包括事件指令的两种写法、事件对象的使用以及事件修饰符的功能。事件指令允许在methods中定义函数并调用，事件对象用于处理用户交互和浏览器事件，事件修饰符如`.prevent`、`.stop`则简化了DOM事件的处理，提供更优雅的编程方式。此外，还提到了按键修饰符在键盘事件监听中的应用。
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事件：
<div id="id">
<!--v-on:事件名="执行的函数或表达式"-->
<button v-on:click="clickTest">点我啊</button>
<!--@事件名="执行的函数或表达式"-->
<button @click="clickTest2">点我呀</button>
<button @click="clickTest2()">点我呀</button>
<!--@事件名="执行的函数名($event)"-->
<button @click="clickTest3">来呀来呀</button>
</div>
// 当然先引入vue.js,可直接引用vue的网络地址，最好是下载到本地使用。
<script src="js/vue.js"></script>
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如下：
<div id="app">
<ul id="list">
<!--使用vue中的循环指令v-for取data中users中对象的值.
通过:key标识符将user与li标签进行了绑定-->
<li v-for="user of users"
:key="user.id"
@click="getUser(user.id,user.name,$event)">
<!-- 复选框选中谁,输出来的就是谁的信息,实现数据与视图的同步更新 -->
<input type="checkbox"/>
{{user.name}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
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);
}
}
});
</script>
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如下，看看它们怎么用的吧！
<div id="app">
<div id="box" @click="dvClick" style="width: 100px;height: 100px;background-color: lightblue;">
<!-- 下面这样，点击按钮，触发的是父级div的事件函数 -->
<!-- <button id="btn" @click="btnClick">点击1</button> -->
<!-- 给事件加上事件修饰符stop后，阻止了事件冒泡，当点击按钮后触发的是按钮上的事件函数 -->
<button id="btn" @click.stop="btnClick">点击2</button>
</div>
<hr>
<!-- 阻止单击事件继续传播(阻止事件冒泡) -->
<a v-on:click.stop="doThis">我是来阻止事件冒泡的</a>
<hr>
<!-- 提交事件不再重载页面(阻止默认事件),不加.prevent修饰符时，提交表单后会重新加载页面-->
<form v-on:submit.prevent="onSubmit" style="border: 1px solid blue;width: 200px;height: 100px;">
<button type="submit">提交表单</button>
</form>
<hr>
<!-- 只有修饰符，不加.prevent会直接去访问百度首页 -->
<form action="http://www.baidu.com" v-on:submit>
<input type="submit" value="提交后访问百度">
</form>
<hr>
<!-- 修饰符可以连续使用 -->
<!-- <a v-on:click="onJump" href="事件对象.html">我要跳转</a>
页面不再跳转
-->
<a v-on:click.stop.prevent="onJump" href="事件对象.html">我要跳转</a>
<hr>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">点一点</div>
<hr>
<!-- 只当在 event.target 是当前元素自身时触发处理函数，事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">戳一戳</div>
<hr>
<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生-->
<!-- 只会阻止对元素自身的点击 -->
<div v-on:click.self.prvent="doThis">我不点自己了</div>
<hr>
<!--会阻止所有的点击-->
<div v-on:click.prevent.self="doThis">全都不要点了</div>
<hr>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis">你再点也只触发一次</a>
<hr>
<!-- 滚动事件默认行为会立刻触发，不会等待onScroll完成-->
<div style="width: 500px;height: 500px;background-color: lightcoral;" v-on:scroll.passive="onScroll">滚动吧</div>
<hr>
<!-- 只有在按键是Enter回车键时调用vm.enterSub()-->
<input type="text" v-on:keyup.enter="enterSub" value="调用enterSub函数" />
<hr>
<!-- 处理函数只会在$event.key是PageDown时调用 -->
<input type="text" v-on:keyup.page-down="onPageDown" value="调用onPageDown函数"/>
<hr>
<!-- 按键码13对应的按钮时Enter回车键，点击回车键才会触发fn函数 -->
<button @keyup.13="clickEnter">小手一点</button>
</div>
<script src="js/vue.js"></script>
<script>
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("你按得是回车键");
},
}
});
</script>
扫一扫
2324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
