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

谁践踏了优雅 2024-04-06 12:42 64阅读 0赞

### 一、前言 ###

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

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

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

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

#### 2.1 概念 ####

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

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

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

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

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

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

#### 2.2 代码使用示例： ####

<div id="app">
        
        <div class="box" v-on:click="divClick"></div>
    
        
        <div class="box" @click="divClick"></div>
    
        
        <div class="box" @mousemove="divMousemove"></div>
    
        
        <div class="box" @click="divClick" @mousemove="divMousemove"></div>
        
        
    	 <div class="box" @="{ click: divClick, mousemove: divMousemove }"></div> 
        
        
        <h2>{
       { counter }}</h2>
        <button @click="counter++">+1</button>
        
    	
    	<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">
        
        <button @click="btn1Click">按钮1</button>
    
        
         
        <button @click="btn2Click('张三', age)">按钮2</button>
    
        
        
        <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">
             
            <button @click.stop="btnClick">按钮</button>
        </div>
        
        
        
    	<form @submit.prevent></form>
        
    	<a href="https://www.baidu.com" @click.prevent="test"></a>
        
        
    	<button @click.stop.prevent="doThis"></button>
        
        
    	<button @click.once="doThis"></button>
        
        
    	<input @keyup.enter="onEnter" />
        
        
        
        <input @keyup.alt.enter="clear" />
        
    	<div @click.ctrl="doSomething">Do something</div>
        
        
        
        <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>

[DOM]: https://developer.mozilla.org/en-US/docs/Web/Events