Vue基础–Vue中的事件绑定指令详解

一、前言

Vue中的事件绑定指令v-on的用于给元素进行事件绑定。

在前端开发中一个非常重要的特性就是交互。

这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。

二、v-on指令的基本使用

2.1 概念

• 缩写：@
• 期望的绑定值类型：Function | Inline Statement | Object (不带参数)
• 参数：event (使用对象语法则为可选项)

事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。

当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。

如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

2.2 代码使用示例：

<div id="app">
    <!-- 1.基本的写法 -->
    <div class="box" v-on:click="divClick"></div>

    <!-- 2.语法糖写法(推荐写法) -->
    <div class="box" @click="divClick"></div>

    <!-- 3.绑定除了click的其他事件写法(掌握) -->
    <div class="box" @mousemove="divMousemove"></div>

    <!-- 4.元素绑定多个事件--常用写法(掌握) -->
    <div class="box" @click="divClick" @mousemove="divMousemove"></div>
    
    <!-- 5.元素绑定多个事件--对象写法(不推荐) -->
	 <div class="box" @="{ click: divClick, mousemove: divMousemove }"></div> 
    
    <!-- 6.绑定的方法位置, 也可以写成一个表达式(不推荐) -->
    <h2>{{ counter }}</h2>
    <button @click="counter++">+1</button>
    
	<!-- 7.动态事件(了解) -->
	<button v-on:[event]="doThis"></button>
</div>

<script src="../lib/vue.js"></script>
<script>
    // 1.创建app
    const app = Vue.createApp({
        data: function() {
            return {
                counter: 0,
                event : 'click'				// event的值取决于动态事件的事件类型
            }
        },
        methods: {
            divClick() {
                console.log("divClick")		
            },

            divMousemove() {
                console.log("divMousemove")
            }
            
            doThis() {
 				console.log("触发了动态事件")
            }
        }
    })

    // 2.挂载app
    app.mount("#app")
</script>

三、事件参数传递

给DOM 元素绑定了事件以后，通常会有给事件方法传递参数的需求。

3.1 代码示例：

<div id="app">
    <!-- 1.默认传递event对象(和原生js是一致的) -->
    <button @click="btn1Click">按钮1</button>

    <!-- 2.传递普通参数-->
    <!-- 可以直接传递普通js数据类型的数据，或者传递一个Vue管理的数据，即data中定义的数据 --> 
    <button @click="btn2Click('张三', age)">按钮2</button>

    <!-- 3.传递普通参数和event对象 -->
    <!-- 此时明确的获取event对象: $event -->
    <button @click="btn3Click('张三', age, $event)">按钮3</button>
</div>

<script src="../lib/vue.js"></script>
<script>
    // 1.创建app
    const app = Vue.createApp({
        data: function() {
            return {
                age: 18
            }
        },
        methods: {
            // 1.默认参数: event对象
            // 总结: 如果在绑定事件的时候, 没有传递任何的参数, 那么event对象会被默认传递进来
            btn1Click(event) {
                console.log("btn1Click:", event)
            },

            // 2.明确参数:
            btn2Click(name, age) {
                console.log("btn2Click:", name, age)
            },

            // 3.明确参数+event对象
            btn3Click(name, age, event) {
                console.log("btn3Click:", name, age, event)
            }
        }
    })

    // 2.挂载app
    app.mount("#app")
</script>

3.2 小结：

• 如果该方法不需要额外参数，那么方法后的()可以不添加。

• 如果方法本身有一个参数，那么默认会将原生事件event参数传递进去。

• 如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

四、事件绑定修饰符

4.1 事件修饰符列表

• .stop ——阻止事件冒泡，调用 event.stopPropagation()。
• .prevent ——阻止默认事件，调用 event.preventDefault()。
• .capture ——在捕获模式添加事件监听器。
• .self ——只有事件从元素本身发出才触发处理函数。
• .{keyAlias} ——只在某些按键下触发处理函数。
• .once ——最多触发一次处理函数。
• .left ——只在鼠标左键事件触发处理函数。
• .right ——只在鼠标右键事件触发处理函数。
• .middle ——只在鼠标中键事件触发处理函数。
• .passive ——通过 { passive: true } 附加一个 DOM 事件。

4.2 案件别名keyAlias列表

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

4.3 系统按键修饰符

只有当对应按键被按下时才会触发。

• .ctrl
• .alt
• .shift
• .meta

4.4 鼠标按键修饰符

特定鼠标按键触发的事件。

• .left
• .right
• .middle

4.5 代码示例

<div id="app">
    <div class="box" @click="divClick">
         <!-- 1. 阻止事件冒泡，让当前点击事件只在button按钮上生效-->
        <button @click.stop="btnClick">按钮</button>
    </div>
    
    <!-- 2 阻止默认事件-->
    <!-- 2.1 阻止表单默认提交事件-->
	<form @submit.prevent></form>
    <!-- 2.2 阻止a标签的默认跳转事件-->
	<a href="https://www.baidu.com" @click.prevent="test"></a>
    
    <!-- 3. 链式调用修饰符 -->
	<button @click.stop.prevent="doThis"></button>
    
    <!-- 4. 点击事件将最多触发一次 -->
	<button @click.once="doThis"></button>
    
    <!-- 5. 按键用于 keyAlias 修饰符-->
	<input @keyup.enter="onEnter" />
    
    <!-- 6. 系统按键修饰符-->
    <!-- 6.1 按下 Alt + Enter时触发 -->
    <input @keyup.alt.enter="clear" />
    <!-- 6.2 按下Ctrl + div被点击时触发 -->
	<div @click.ctrl="doSomething">Do something</div>
    
    <!-- 7. 鼠标按键修饰符-->
    <!-- 7.1 点击鼠标左键时时触发 -->
    <div @click.left="doSomething">Do something</div>
</div>

<script src="../lib/vue.js"></script>
<script>
    // 1.创建app
    const app = Vue.createApp({
        data: function() {
            return {
                message: "Hello Vue"
            }
        },
        methods: {
            btnClick(event) {
                console.log("btnClick")
            },
            
            divClick() {
                console.log("divClick")
            }
           
            doThis() {
                console.log("doThis")
            }
            
            onEnter() {
                console.log("onEnter")
            }
        }
    })

    // 2.挂载app
    app.mount("#app")
</script>