1.vue的事件綁定格式是v-on: 或者@
比如
<button v-on:click="counter += 1">Add 1</button>
或者是
<button @click="counter += 1">Add 1</button>是一樣的
2.事件處理方法，要在methos中定義。比如
methods:{
clickMe(){
console.log('我是methods中的方法 clikMe')
}
}
3.以下是案例代碼，
<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 數值 : {{ counter }} </button><br />
<button v-on:dblclick="greet('abc', $event)">Greet</button>
<button type="button" @click="clickMe">點擊一下: {{num}}</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue",
num: 1
},
methods:{
greet : function (str, e) {
alert(st);
console.log(e);
},
greet(str, e){
alert(str);
console.log(e);
},
clickMe(){
this.num++
}
}
});
</script>
以上可分析
1.事件邏輯可直接寫在代碼中，觸發時直接運行一些JavaScript代碼
<button v-on:click="counter += 1"> 數值 : {{ counter }} </button><br />
2. 通過事件傳參，可以在事件中獲取需要得到的信息
3. 可以通過事件改變數值進行渲染，通過this形式，直接修改data中的屬性值
事件處理往往不是這么簡單，但是這是最基本的，我們需要了解最基本的需求，其他是通過完善邏輯即可