事件繫結v-on+事件函式呼叫methods
事件繫結
要想做一個功能複雜的前端應用，肯定離不開與使用者的互動，使用者互動最相關的就是事件處理，雙向資料繫結中v-model指令它的底層用到的就是事件，所以vue專門提供了一種事件處理的語法結構，其實用到的還是指令，我們稱之為事件繫結，之前有一種說法叫做資料繫結（把資料填充到頁面中的標籤裡面）其實它們之間所做的工作是類似的，就是把資料model和模版view關聯起來，只不過是對於事件處理來說繫結的是具體的操作。
vue中如何處理事件？
- v-on指令用法
<input type = 'button' v-on:click = 'num ++'/>
v-on後面跟著冒號：+標準事件名稱（如：click/focus/blur）=再跟具體的事件處理邏輯（如‘num++’）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
< 
- v-on 簡寫形式
<input type = 'button' @click = 'num++'/>
就是把v-on：改成@，vue的設計者還是非常替程式設計師考慮的，儘量把程式設計模式做的簡答化，相對比v-on的簡寫模式要寫的字元減少了，敲程式碼的時候更方便。實際開發中也是用v-on:的簡寫模式@
<button @click = 'num++'>點選2</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按鈕控制num值發生變化的時候，頁面的內容肯定也是跟著變的因為資料是響應式的 -->
<button v-on:click = 'num++'>點選</button>
<button @click = 'num++'>點選2</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
}
});
</script>
</body>
</html>
如果把資料的處理邏輯全部寫在v-on：click = ‘XX’中合理嗎？
明顯是不合理的，因為隨著業務量的複雜，邏輯程式碼比較多的話，可讀性明顯是不好的，應該要能想到 邏輯程式碼得抽取到一個方法程式碼裡面，Vue方法 定義在哪個位置呢？在vue當中專門提供了一個屬性來定義我們需要的一個方法，叫methods，它的值是一個物件，在物件當中可以定義很多的方法，比如說起個名handle：function（）{}， 裡面可以實現控制邏輯，比如‘num++’邏輯應該寫在handle方法裡。
事件函式的呼叫方式
- 直接繫結函式名稱
<button v-on:click = 'say'> Hello</button>
- 呼叫函式
<button v-on:click = 'say()'>Say hi </button>
事件函式的呼叫方式–直接繫結函式名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按鈕控制num值發生變化的時候，頁面的內容肯定也是跟著變的因為資料是響應式的 -->
<button v-on:click = 'num++'>點選</button>
<button @click = 'num++'>點選2</button>
<button @click = 'handle'>點選3</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods: {
handle:function() {
// 在方法裡面num無法直接訪問，要通過this才能得到num的值
// this指的是誰呢？通過vm可以訪問到data中的屬性
// this就是vm也就是vue例項物件
console.log(this === vm)
this.num++;
}
},
});
</script>
</body>
</html>
console.log(this === vm)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按鈕控制num值發生變化的時候，頁面的內容肯定也是跟著變的因為資料是響應式的 -->
<button v-on:click = 'num++'>點選</button>
<button @click = 'num++'>點選2</button>
<button @click = 'handle'>點選3</button>
<button @click = 'handle()'>點選4</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods: {
handle:function() {
// 在方法裡面num無法直接訪問，要通過this才能得到num的值
// this指的是誰呢？通過vm可以訪問到data中的屬性
// this就是vm也就是vue例項物件
console.log(this === vm)
this.num++;
}
},
});
</script>
</body>
</html>
事件函式的呼叫方式–呼叫函式
<button @click = 'handle()'>點選4</button>
事件繫結的格式v-on只是指令，冒號：後面跟標準事件名稱，並且可以將v-on: 簡寫成@；事件函式的呼叫方式有兩種一種是直接繫結函式名，一種是呼叫函式；函式必須定義在methods的屬性當中，還要知道函式中的this是什麼含義，指的是vue的例項物件。