一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

在上一篇文章中，详细讲过了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>
`

可以看到我们在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>
`

chrome-capture (1).gif

阻止事件冒泡，是给当前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

【Vue3从零开始-第二章】2-8 事件绑定详解

前言

回顾

简写