前情回顾
上一课，我们学习了三个vue指令：v-if, v-show, v-for。
v-if和v-show的作用是条件性的渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-for的作用是循环渲染一块内容，比如对列表进行循环渲染，展示不同的数据。
事件监听器（v-on指令）
v-on指令可以为你添加一个事件监听器，用来与用户进行交互。我们可以使用v-on写一个一个非常简单的点击+1的功能，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>v-on</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>{{count}}</span>
<button v-on:click="handleClick">加1</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
handleClick() {
this.count++
}
}
})
</script>
</body>
</html>
运行结果：
每次点击button，数值加1
代码解析：
- 代码第11行，button标签内添加了一个v-on:click事件监听器。
- 在vue实例化对象中，定义了一个data属性，count初始化为0。
- 在vue实例化对象中，还定义了一个方法，handleClick方法。
v-on:click="handleClick"语句就是将事件监听器绑定在该方法中。 - handleClick方法中实现了count加1的功能。注意，this的作用就是表示当前的vue实例对象。
表单输入的双向绑定(v-model指令)
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>v-on</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
<input v-model="msg" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 0
}
})
</script>
</body>
</html>
运行结果：
刚打开浏览器的时候看到的是0，以及输入框里有个0.当你在输入框里输入其他字符串的时候，外面的span标签里的内容也跟着变化。
这就叫双向数据绑定。
代码解析：
- 在input标签内，使用了v-model指令，将输入框绑定在msg中。
- msg定义在vue实例化对象的data属性里。
- 这就实现了用户输入与DOM双向数据绑定，非常简单吧！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。