上一篇我们讲了vue的声明式渲染、常见指令的用法、条件与循环等。今天我们来回顾vue下的事件绑定及数据绑定。
v-on
先来看一下API
用法：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
我们先来看一下v-on给Html元素绑定原生DOM事件
用法：在需要绑定事件的元素上面加上v-on:事件名或者它的缩写@事件名
例如：
<button type="button" v-on:click="clickMe">我是按钮</button>或
<button type="button" @click="clickMe">我是按钮</button>
这里的clickMe就是我们的点击事件要触发的方法。
接下来，我们在vue实例中添加methods属性，用来定义我们绑定的事件触发的方法：
var app = new Vue({
el: '#app',
data: function(){
return {
num: 0
}
},
methods: {
//在methods里面定义事件所触发的方法
clickMe(){
//需要执行的操作
alert("我被点击了")
}
}
})
这样我们就完成了事件绑定的操作。
接下来看一个例子：
点击下方的加号按钮，实现num加1的操作。
①首先，我们页面上需要有两个元素：存放数值的容器、按钮
<div id="app">
<p>num = </p><!-- 以p标签为例 -->
<button type="button">+</button>
</div>
②接下来，通过v-on指令给我们的按钮绑定点击事件
<div id="app">
<p>num = </p>
<button type="button" v-on:click="clickMe">+</button>
</div>
③在methods里面定义我们给按钮绑定的事件的方法，并在data中声明num变量
var app = new Vue({
el: '#app',
data: function(){
return {
num: 0
}
},
methods: {
clickMe(){
this.num++;
}
}
})
④将num渲染到容器中显示
<p>num = {{ num }}</p>
这样，我们就完成了事件绑定的操作，是不是很简单呢？
v-model
v-model只能应用在表单输入绑定上。我们可以在<input>、<textarea>、<select>元素上创建双向数据绑定。vue会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据。
接下来我们看一个例子：
当我们在文本框输入内容时，下面的内容区也跟随着变化。
接下来我们看下代码：
<div id="app">
<input type="text" v-model="message" />
<p>您输入的是：{{ message }}</p>
</div>
var app = new Vue({
el: '#app',
data(){
return {
message: ''
}
}
})
v-model绑定在了<input>元素上面，message就是v-model要监听的对象。{{ message }}负责获取message的值并显示。这一过程也称vue的双向数据绑定。
我们再来看一个例子：
<div id="app">
<input id="checkme" type="checkbox" v-model="checked" />
<label for="checkme">{{ checked }}</label>
</div>
var app = new Vue({
el: '#app',
data(){
return {
checked: true
}
}
})
可以看出，当我们每次点击复选框的时候，它后面的值都会发生变化，这就是因为v-model监听了checked值的变化，它可以将数据实时刷新在页面上显示。
扩展
v-model 本质上是语法糖（是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失）
那么我们来看一下v-model的实现原理
v-model的实现原理其实就是v-on对表单元素绑定了input事件，在事件定义函数里面监听用户输入的内容并更改data返回的数据对象，从而达到数据更新的目的。
<div id="app">
<!-- v-model的实现原理 -->
<input type="text" v-on:input="fun"/>
<p v-bind:value="message">{{ message }}</p>
</div>
new Vue({
el: '#app',
data: function(){
return {
message: ''
}
},
methods: {
fun(e){ //这里的e指的是v-on绑定的事件对象
//e.target指事件绑定的DOM对象
console.log(e.target)
//更改data数据对象里面message的值
this.$data.message = e.target.value
}
}
})
ps.
这里的e指的是v-on绑定的事件对象
console.log(e)
e.target指事件绑定的DOM对象
console.log(e.target)
总结
今天我们学习了事件绑定，以及v-model的双向数据绑定，相信看到这里的小伙伴应该有所了解了，如果有不懂的小伙伴或者文章有什么不足之处可以在后台留言给我哦，感谢你们的支持，我会继续努力的！
