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>