如何利用Vue.js库中的v-on指令绑定按钮点击事件

Question

如何利用Vue.js库中的v-on指令绑定按钮点击事件

Answer 1

绑定的事件有两种：
1、绑定事件处理器
2、绑定内联方法调用
<input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber">
<input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()">
js：
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件响应方法的逻辑代码
getNumber: function (e) {
this.number += 1; // 不管是内联方法调用，还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
}
}
});

Answer 2

// 创建普通的Vue实例
var vm = new Vue({
data: {
},
methods:{
btnClick:function(){
alert('1 被点击了');
},
btnClick2:function(){
alert('2 被点击了');
}
}
})