文章目录
一、数据绑定
1、单向绑定
把Model绑定到View后,当用JavaScript代码更新Model时,View会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model操作就可以实现视图的联动更新。
单向绑定的实现过程是:
- 所有数据只保存一份。
- 一旦数据变化,就去更新页面(只有data->DOM,没有DOM->data)
- 若用户在页面上做了更新,就手动收集(双向绑定式自动收集),合并到原有的数据中。
( 1 )插值绑定
数据绑定的基本形式,用“{ { }}”实现,这种语法在Vue中称为Mustache语法。插值的形式就是{ { data }},它使用的是单向绑定。首先定义一个JavaScript对象作为Model,并且把这个Model的两个属性绑定到DOM节点上。
<div id="app">{
{
num }}</div>
<script>
new Vue({
el: '#app',
data: {
num: '学习Vue'
}
})
</script>
( 2 )v-bind绑定
如果HTML的某些属性可以支持单向绑定,我们只需要在该属性前面加上v-bind指令,这样Vue在解析时会识别出该指令,将属性值跟Vue实例的Model进行绑定。以后,我们就可以通过Model来动态的操作该属性,从而实现DOM的联动更新。
<div id="app">
<p v-bind:class="jumooc">Hello,{
{
name }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Vue之旅',
jumooc:'red'
}
})
</script>
<style>
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
( 3 )双向绑定
Vue框架的核心功能就是双向数据绑定。简单的说,双向绑定就是把Model绑定到View的同时也将View绑定到Model上,这样既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。
在Vue中只有表单元素能够创建双向的绑定,可以用v-model指令在<input>、<textarea>
及<select>
元素上创建双向数据绑定。
<form action="#" id="app">
<p>
<input type="text" v-model="name">
</p>
<p>
<input type="text" v-model="age">
</p>
<p>姓名:{
{
name }}</p>
<p>年龄:{
{
age }}</p>
</form>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '刘备',
age: 38
}
})
</script>
二、表单控件绑定
1、text(文本框)的绑定
<div id="app">