4.事件处理指令

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

v-on指令可以简写为：@

<div id="app">
    <button v-on:click="pointme">点击我</button>
    <!-- v-on指令的简写 -->
    <button @click="pointyou">点击你</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods:{
            pointme(){
                alert('点击了我');
            },
            pointyou(){
                alert('点击了你');
            }
        }
    });
</script>

一个案例：对一个数进行加减运算

<div id="app">

    <button v-on:click="add(1)">加</button>
    <button @click="subtract(1)">减</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num:1
        },
        methods:{
            add(value){
                this.num += value;
            },
            subtract(value){
                this.num -= value;
            }
        }
    });
</script>