前情回顾
上一课,我们学习了三个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) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。