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>
待续...