vue 事件

vue中用 v-on绑定事件　　

简单绑定一个点击事件

<div id="app">
    <button v-on:click="sayHi">点击我</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"你好啊！"
        },
        methods:{        //方法必须定义在vue的Methods对象中
            sayHi:function (){
                alert(this.message);
            }
        }
    })
</script>

注意！！所有的事件，只有卸载methods对象中，才会被识别，否则不会被识别

在点击事件中，出了绑定已经定义好的函数以外，还可以直接在标签中写函数

<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>

    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })

结果显示