Vue 指令之v-on的使用

v-on 指令用于监听 DOM 事件

1. v-on 基本使用

<div id="app">    <button v-on:click="test">测试</button></div>

<script>    let vm = new Vue({        el: '#app',        methods: {            test: function() {                console.log(123)            },        }    })</script>

v-on 可缩写为 @

<button v-on:click="test">测试</button><button @click="test">测试</button>

2. 修饰符

<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实例

<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>