HelloWorld程序是新手村的哥布林，想快速升級就得刷複雜點的怪物。今天我們來看看能丟火的哥布林和牛頭人(ntr)=-=。
這個例子是簡單學習下Vue的事件處理。回想原始的Js和Jquery，要想處理事件，一般分兩步:
1.找到需要觸發的事件源控件，爲其綁定事件監聽函數(比如一個button元素, 它有一個onclick事件屬性)；
2.在函數裏面寫要處理的邏輯(比如把‘Hello, Vue’替換成‘lz很帥‘)。
我們在上一篇筆記中其實已經做過類似的事情——把app.message的值修改，頁面內容也跟着修改。那麼在Vue中如何處理事件呢? 答案很簡單，就是指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-helloworld</title>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="message='是的你很帥'">說我帥</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello, Vue!"
}
});
</script>
</body>
</html>
這個很簡單，也很有趣，就是通過v-on指令給button綁定click事件，字符串裏面的是事件的邏輯，這裏我只是簡單地通過修改message的值改了下文本內容。下面看看複雜點的，如何實現一個手動計數器。
點擊+按鈕計數器顯示1，如果點擊-，那麼計數器顯示-1。稍微想一想，其實代碼並不難寫:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter</title>
</head>
<body>
<div id="app">
<h3>計數器:{{counter}}</h3>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
}
});
</script>
</body>
</html>
效果達到了，但是肯定有朋友會問：事件邏輯不會這麼簡單，我要是想寫複雜點的邏輯難道都寫在v-on:click=""的引號裏面？我想給它設定閾值比如到0就不讓減該怎麼做呢? 這個問題問得好，我一個朋友也這麼問我。其實分析一下，不難得出，引號裏面就是事件的邏輯代碼，而js中函數是一等公民，那麼能不能把邏輯封裝在函數中再把函數扔到引號中去呢?我們來試一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter</title>
</head>
<body>
<div id="app">
<h3>計數器:{{counter}}</h3>
<button v-on:click="increase">+</button>
<button v-on:click="decrease">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increase: function () {
this.counter++;
console.log('我加一了!');
},
decrease: function () {
if (this.counter > 0) {
this.counter--;
} else {
console.log('我不能減了');
}
}
}
});
</script>
</body>
</html>
結果還真可以，我們用到了Vue對象中新屬性methods，在裏面定義了我們的事件函數。函數裏面可寫的邏輯就多了，不過要注意函數內部是不能直接引用counter變量的，因爲全局上下文中沒有一個叫counter的變量，這裏用到了this。這裏我遇到一個問題，將事件函數寫成箭頭函數的方式就沒有效果，後來打印出來才發現是undefined，聰明的你肯定知道原因了，我要找找原因。
decrease: () => {
console.log(this.counter);
if (this.counter > 0) {
this.counter--;
} else {
console.log('我不能減了');
}
}
另外關於click事件，有個簡潔點的寫法“@click”，更加簡潔:
<button @click="decrease">-</button>
待續...