> v-on 指令用于监听 DOM 事件 #### 1. v-on 基本使用 --- ```html <div id="app"> <button v-on:click="test">测试</button> </div> ``` ```javascript <script> let vm = new Vue({ el: '#app', methods: { test: function() { console.log(123) }, } }) </script> ``` **`v-on` 可缩写为 `@`** ```html <button v-on:click="test">测试</button> <button @click="test">测试</button> ``` #### 2. 修饰符 --- ```html <div id="app"> <span v-on:click="go2('222')"> <!-- .stop 阻止冒泡 --> <span v-on:click.stop="go('111')">点我</span> </span> <br> <!-- 只有第一次点击会触发函数 --> <span v-on:click.once="go(333)">只触发一次</span> </div> ``` **方法中的 `this` 自动绑定为当前 `Vue实例`** ```javascript <script> let vm = new Vue({ el: '#app', methods: { test: function() { console.log(123) }, go: function(msg) { console.log(msg, this) }, go2: function(msg) { console.log(msg, this) }, } }) </script> ```