![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/f3be5eac653f4fdf959488b1c8460a26.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇文章中，详细讲过了vue的列表循环渲染，今天我们继续深入了解一下vue的事件绑定。大家在之前的例子中也有用过，下面我们就详细的讲解一下。
回顾
在第一章中，我们有写过一个计数器的小例子，主要就是通过点击按钮，触发事件之后给data函数里面的counter值累加1
<script> const app = Vue.createApp({ data(){ return { counter: 0 } }, methods: { handleBtnClick(){ this.counter += 1 } }, template: ` <div> {{counter}} <button v-on:click="handleBtnClick">按钮</button> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
简写
我们在定义事件的时候，都会在click前面加上v-on:，在vue里面可以将v-on:写成@，也是一样的效果哦。
v-on:click相当于@click
event
在原生的js里面，我们可以通过给元素绑定事件之后，获取到一些原生的数据，那么在vue里面是不是也可以拿到这种类似于原生js里面的数据呢？
methods: { handleBtnClick(event){ console.log('event：', event) this.counter += 1 } }, template: ` <div> {{counter}} <button @click="handleBtnClick">按钮</button> </div> ` 复制代码
- 在方法中接收一个
event参数，在方法里面打印出来，我们可以在浏览器中看到和原生js对应的一个数据对象了。
比如打印出当前点击的DOM元素。
handleBtnClick(event){ console.log('event.target：', event.target) this.counter += 1 } 复制代码
- 有个疑问，当我们想要在
click事件上传递其他参数应该怎么办呢？这个event要怎么获取到呢?
methods: { handleBtnClick(num, event){ console.log('event.target：', event.target) this.counter += num } }, template: ` <div> {{counter}} <button @click="handleBtnClick(2, $event)">按钮</button> </div> ` 复制代码
![QE52_}I@3M]T8EC$3]VFI4A.png](https://ucc.alicdn.com/pic/developer-ecology/af5e35e32ec14be284fedf9d20c1050c.png?x-oss-process=image/resize,w_1400/format,webp "QE52_}I@3M]T8EC$3]VFI4A.png")
- 可以看到我们在
click事件上传递了一个2和$event两个参数给到方法中，这个$event就是vue提供的一个原生event参数了。
事件修饰符
stop
methods: { handleBtnClick(){ this.counter += 1 }, handleDivClick(){ alert('你点击了div元素') } }, template: ` <div> <div @click="handleDivClick"> {{counter}} <button @click="handleBtnClick">按钮</button> </div> </div> ` 复制代码
- 当我在
button的父元素上也添加一个点击事件之后，会发现在触发按钮点击事件之前还会冒泡到父元素上。
- 在vue里面，是给了一个修饰符
stop来表示阻止事件冒泡。
template: ` <div> <div @click="handleDivClick"> {{counter}} <button @click.stop="handleBtnClick">按钮</button> </div> </div> ` 复制代码
阻止事件冒泡，是给当前DOM元素上的事件添加
stop修饰符，这样就不会触发父级元素的事件效果了。
self
除了上面说的 stop 修饰符之外，还有 self 可以和它有类似的作用，但是self的作用是用来执行当前元素的事件的，除了当前元素之外，包括元素下面的子元素触发事件，都是不会触发到self修饰的元素上。
methods: { handleBtnClick(){ this.counter += 1 }, handleDivClick(){ alert('你点击了div元素') } }, template: ` <div> <div @click.self="handleDivClick"> {{counter}} <button @click="handleBtnClick">按钮</button> </div> </div> ` 复制代码
- 当我点击按钮时，是不会冒泡到父元素上的事件的，但是当我点击父元素中的内容时，则会触发到该事件。
自身事件触发，只有当点击
self修饰的元素下的内容时才会触发，点击其他元素或该元素下的子元素时，也不会触发。
小结
除了上面两个事件修饰符之外，还有以下几种事件修饰符：
prevent：阻止默认事件行为
capture：捕获模式，和冒泡模式是刚好相反的，冒泡是由内到外触发事件，捕获是从外到内触发事件
once：当前事件仅触发一次 由于以上修饰符的演示效果不佳，所以只能留给大家自己去实验一下了。
按键修饰符
<script> const app = Vue.createApp({ methods: { handleKeyDown(){ console.log('敲键盘啦~') } }, template: ` <div> <input @keydown="handleKeyDown" /> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
通过keydown事件，可以获取到用户敲击键盘时触发的事件，如果我想要在敲下键盘回车键的时候才触发事件呢？
- 在原生js里面，可能需要获取
event，然后通过event.keycode = 13这样拿到回车键的方法。
- 在vue里面提供了各个快捷键的修饰符，可以直接获取到对应按键的方法。
<input @keydown.enter="handleKeyDown" /> 复制代码
通过在keydown事件后面添加.enter修饰符之后，会发现可以直接替代原生js里面的event.keycode这样的写法。
小结
除了enter之外，还有tab、delete、esc、up、down、left、right等按键修饰符。
鼠标修饰符
当我们单独在DOM元素上添加一个click事件时，默认是点击鼠标左键去触发的，但是vue还提供了其他鼠标事件的修饰符。
<script> const app = Vue.createApp({ methods: { handleClick(){ console.log('鼠标点击') } }, template: ` <div> <div @click.right="handleClick">hello</div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
鼠标修饰符也是在click事件后面添加的，除了right之外，还有left左键和middle中间滚轮键。
精确修饰符
有时候我们在点击事件时，可能需要判断一下，是否键盘上也按住了ctrl之类的按键。
<script> const app = Vue.createApp({ methods: { handleClick(){ console.log('按住ctrl鼠标点击') } }, template: ` <div> <div @click.ctrl="handleClick">hello</div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
- 我们在点击事件后面直接添加
ctrl之后，当你按下ctrl+c或者其他的ctrl组合键时再点击当前DOM元素，好像也会直接触发这个事件。
- 如果想要精确到只是按下
ctrl，而不是按下ctrl的组合键时，就要用到exact修饰符了。
template: ` <div> <div @click.ctrl.exact="handleClick">hello</div> </div> ` 复制代码
- 由于这个例子无法截取动图，所以需要大家自己手动去尝试了。
总结
本篇文章主要把vue中的事件绑定详细讲解了一下，那我们在回顾一下上面的内容：
- 事件修饰符：
stop、prevent、capture、self、once、passive
- 按键修饰符：
enter、tab、delete、esc、up、down、left、right
- 鼠标修饰符：
left、middle、right
- 精确修饰符：
exact
