Vue.js从入门到项目实践（超值版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.1.1　数据绑定的方法

数据绑定可简单地分为单向数据绑定和双向数据绑定，下面进入对这两种数据绑定方法深层的学习。

1．单向绑定

单向绑定：把Model绑定到View后，当用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。

单向数据绑定的实现思路具体如下。

（1）所有数据只保存一份。

（2）一旦数据变化，就去更新页面（只有data→DOM，没有DOM→data）。

（3）若用户在页面上做了更新，就手动收集（双向绑定是自动收集），合并到原有的数据中。

接下来，讲解几个单向绑定的案例。

1）插值绑定

文本插值绑定是数据绑定的最基本形式，用双大括号“{{ }}”实现，这种语法在Vue中称为Mustache语法。插值形式就是{{data}}的形式，它使用的是单向绑定。首先定义一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。代码如下：

    <!DOCTYPE html>
    <html>
      <head>
       <meta charset="utf-8">
       <title>插值绑定练习</title>
       <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
      </head>
    <body>
       <div id="app">
           {{num}}
       </div>
      <script type="text/javascript">
       var vm = new Vue({
         el: '#app',
         data: {
           num: '学习Vue'
         }
      })
      </script>
    </body>
    </html>

运行的效果如图5-1所示。

图5-1　插值运行效果图

提示：Vue实例就是ViewModel的代理对象。在上述代码中，el:指定要把Model绑定到id为app的DOM节点上；data:指定Model，初始化Model的属性num，在View内部的<div>节点上可以直接用{{num}}引用Model的某个属性。简单来说，代码<div></div>中的{{num}}就相当于View，data中的num: '学习Vue'就相当于是一个Model。

创建一个Vue实例，Vue可以自动把Model的状态映射到el指定的View上，并且实现绑定，这样我们就可以通过对Model的操作来实现对DOM的联动更新。例如，打开浏览器，在控制台中输入vm.num='Vue'，执行上述代码，可以观察到页面立刻发生了变化，原来的'学习Vue'自动变成了'Vue'。Vue作为MVVM框架会自动监听Model的任何变化，在Model数据变化时更新View的显示，这种Model到View的绑定就是单向绑定。

2）v-bind绑定

如果HTML的某些属性可以支持单向绑定，我们只需要在该属性前面加上v-bind指令，这样Vue在解析时会识别出该指令，将属性值跟Vue实例的Model进行绑定。以后，我们就可以通过Model来动态地操作该属性，从而实现DOM的联动更新。例如，<p class="jumooc">，<p>中class样式指定的值为jumooc，它是一个静态的属性值，如果想使该属性值跟Model进行一个绑定，只需要加上一个v-bind指令，如<p v-bind:class="jumooc">。绑定后，jumooc不再是一个静态的字符串，而是Vue实例中的data.jumooc变量，也就是它跟Model的jumooc进行了绑定，所以我们可以通过操作Model的jumooc来实现对View的class属性动态更新，从而实现View的动态更新。

代码如下：

运行的效果如图5-2所示。

图5-2　v-bind运行效果图

提示：如上面代码所示，vm.jumooc的初始值为'red'，此时<p>的style属性对应的是.red，故背景为红色；若在浏览器的控制台中输入vm.classed='bule'，此时背景就自动变成了蓝色。可以看到，通过对class属性进行绑定，我们就可以动态地改变class对应的样式。这都是通过对Model的操作完成的，没有进行任何DOM操作。

2．双向绑定

双向绑定：是指HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的。简单地说，Vue对象的改变会直接影响HTML标签的变化，而且标签的变化也会反过来影响Vue对象的属性变化。这样就会彻底改变以前DOM的开发方式。以前DOM驱动的开发方式（尤其是以jQuery为主的开发时代）都是DOM变化后触发JS事件，在事件中通过JS代码获取标签的变化，再与后台进行交互，然后根据后台返回的结果更新HTML标签，比较烦琐。有了Vue的双向绑定，开发者只需要关心JSON数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回JS对象上；同时，开发方式直接变革成了前端由数据驱动，远远抛弃了由DOM驱动主导的开发时代。

Vue框架的核心功能就是双向的数据绑定。简单来说，双向绑定就是把Model绑定到View的同时也将View绑定到Model上，这样既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。因此，当我们用JavaScript代码更新Model时，View就会自动更新；反之，如果更新View，Model的数据也会自动被更新。

在Vue中只有表单元素能够创建双向的绑定，可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。例如，在相应的位置上只要输入v-model="需要绑定的数据"后，数据就可以进行Model→View和View→Model的绑定。

代码如下：

    <!DOCTYPE html>
    <html>
      <head>
       <meta charset="utf-8">
       <title>双向绑定</title>
       <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
      </head>
    <body>
       <form id="app" action="#">
         <p><input v-model="name"></p>
         <p><input v-model="age"></p>
       </form>
      <script type="text/javascript">
         var vm = new Vue({
           el: '#app',
           data: {
            name: 'lili',
            age: '18'
           }
         });
      </script>
    </body>
    </html>

运行的效果如图5-3所示。

图5-3　v-model运行效果图

可以在图5-3的表单中输入内容，然后在浏览器控制台中用vm.$data查看Model的内容，也可以用vm.name查看Model的name属性，它的值和表单对应的<input>中的内容是一致的。如果在浏览器控制台中用JavaScript更新Model（例如，执行vm.name='lili'），表单对应的<input>内容就会立刻更新。可以看到，通过v-model实现了表单数据和Model数据的双向绑定。

上一章目录下一章