第 2 章 数据绑定和第一个 Vue 应用

学习任何一种框架，从一个 Hello World 应用开始是最快了解该框架特性的途径，我们先从一 段简单的 HTML 代码开始，感受 Vue.js 最核心的功能。

  
      
      
      
  
  
      

          
          
您好，{{ name }}
      
  
  

这是一段简单到不能再简单的代码，但却展示出了 Vue.js 最核心的功能： 数据的双向绑定。 在输入框输入的内容会实时展示在页面的 h1 标签内，如图所示。

Vue 实例与数据绑定

• 实例与数据

Vue.js 应用的创建很简单，通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用：

      var app = new Vue({
          //选项
      })

变量 app 就代表了这个 Vue 实例。事实上，几乎所有的代码都是一个对象，写入 Vue 实例的选项内的。
首先，必不可少的一个选项就是 el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器，比如：

• 挂载成功后，我们可以通过 app.$el 来访问该元素。 Vue 提供了很多常用的实例属性与方法， 都以$开头，比如$el， 后续还会介绍更多有用的方法。
• 回顾章节开始的 Hello World 代码，在 input 标签上，有一个 v-model 的指令，它的值对应于我们创建的 Vue 实例的 data 选项中的 name 字段， 这就是 Vue 的数据绑定。
• 通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。 Vue 实例本身也代理了 data 对象里的所有属性，所以可以这样访问：

      var vm = new Vue({
          el:'#app',
          data:{
              a:2
          }
      }); 
      console.log(vm.a);

• 除了显式地声明数据外，也可以指向一个己有的变量，并且它们之间默认建立了双向绑定， 当修改其中任意一个时，另一个也会一起变化：

• 生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子， 我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使用过 jQuery， 一定知道它的 ready() 方法，比如以下示例：

      $(document).ready(function(){
          // DOM 加载完后，会执行这里面的代码
      });

Vue 的生命周期钩子与之类似，比较常用的有：

• created: 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。
  需要初始化处理一些数据时会比较有用，后面章节将有介绍。
• mounted: el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
• beforeDestroy: 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它的 Vue 实例：

      var vm = new Vue({
          el: '#app',
          data: {
              a : 666
          },
          created: function () {
              console.log(this.a);//2
          },
          mounted: function () {
              console.log(this.$el);//

          }
      }); 

• 插值与表达式

使用双大括号（Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：

  
      

          {{ book }}
      
  
  

大括号里的内容会被替换为《Vue.js 实战》，通过任何方法修改数据 book，大括号的内容都会被实时替换，比如下面的这个示例，实时显示当前的时间，每秒更新：

  
      

          {{ date }}
      
  
  

这里的｛{ date } ｝输出的是浏览器默认的时间格式，如下所示，所以在这里需要注意时区。有多种方法可以对时间格式化，比如赋值前先使用自定义的函数处理。 Vue 的过滤器（ filter ）或计算属性 (computed ）也可以实现，稍后会介绍到 。

如果有的时候就是想输出 HTML，而不是将数据解释后的纯文本，可以使用 v-html:

link 的内容将会被渲染为一个具有点击功能的 a 标签，而不是纯文本。这里要注意，如果将用户产生的内容使用 v-html 输出后，有可能导致 xss 攻击，所以要在服务端对用户提交的内容进行处理， 一般可将尖括号“＜ ＞”转义。
如果想显示｛｛｝｝标签，而不进行替换， 使用 v-pre 即可跳过这个元素和它的子元素的编译过程， 例如：

在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、 三元运算等，例如：

  
      

          {{ number / 10 }}
          {{ isOK ? '确定' : '取消' }}
          {{ text.split(',').reverse().join(',') }}
      
  
  

显示结果依次为： 10、取消、 456,123。
Vue.js 只支持单个表达式，不支持语句和流控制。另外， 在表达式中，不能使用用户自定义的全局变量， 只能使用 Vue 白名单内的全局变量， 例如 Math 和 Date。 以下是一些无效的示例：

           
          {{ var book = 'Vue.js 实战' }}
          
          {{ if(ok) return msg }}

• 过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一个管道符 “ （ | ）” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添加选项 filters 来设置， 例如在上一节中实时显示当前时间的示例，可以对时间进行格式化处理：

 
     

         {{ date | formatDate }}
     
 
 

过滤器也可以串联，而且可以接收参数，例如：

        
         {{ message | filterA |  filterB }}
        
         {{ date | filterA('arg1','arg2') }}

这里的字符串arg1 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。
过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计 算属性，下一章中会详细介绍它的用法。

指令与事件

指令（Directives）是 Vue.js 模板中最常用的一项功能，它带有前缀 v－， 在前文我们已经使用过不少指令了，比如 v-if、 v-html、 v-pre 等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上，以 v-if 例：

 
     

        
显示这段文本
     
 
 

当数据 show 的值为 true 时， p 元素会被插入，为 false 时则会被移除。数据驱动 DOM 是 Vue.js 的核心理念，所以不到万不得已时不要主动操作 DOM，你只需要维护好数据， DOM 的事 Vue 会帮你优雅的处理。
Vue.js 内置了很多指令，帮助我们快速完成常见的 DOM 操作，比如循环渲染、显示与隐藏等。 在后面章节中会详细地介绍这些内置指令，但在此之前，你需要先知道 v-bind 和 v-on。 v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id、 class 等，例如下面几个示例：

 
     

        链接
        
     
 
 

• 示例中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。上述示例渲染后的结果为：
  链接
  
• 以上是介绍 v-bind 最基本的用法，它在 Vue.js 组件中还有着重要的作用，将在后面章节中详细介绍。 另一个非常重要的指令就是 v-on，它用来绑定事件监听器，这样我们就可以做一些交互了， 先来看下面的示例：

 
     

      
这是一段文本
      点击隐藏
     
 
 

在 button 按钮上，使用 v-on:click 给该元素绑定了一个点击事件，在普通元素上， v-on 可以监听原生的 DOM 事件，除了 click 外，还有 dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据，如示例中的 this.show = false；把数据 show 修改为了 false，所以点击按钮时，文本 p 元素就被移除了。 表达式除了方法名， 也可以直接是一个内联语句，上例也可以改写为：

 
     

      
这是一段文本
      点击隐藏
     
 
 

如果绑定的事件要处理复杂的业务逻辑，建议还是在 methods 里声明一个方法，这样可读性更强也好维护。
Vue.js 将 methods 里的方法也代理了，所以也可以像访问 Vue 数据那样来调用方法：

 
     

      
这是一段文本
      点击隐藏
     
 
 

在 handleClose 方法内，直接通过 this.close() 调用了 close() 函数。在上面示例中是多此一举的， 只是用于演示它的用法，在业务中会经常用到，例如以下几种用法都是正确的：

更多关于 v-on 事件的用法将会在后面章节中详细介绍。

语法糖

语法糖是指在不影响功能的情况下， 添加某种方法实现同样的效果， 从而方便程序开发。
Vue.js 的 v-bind 和 v-on 指令都提供了语法糖， 也可以说是缩写， 比如 v-bind， 可以省略 v-bind, 直接写一个冒号 “：”

       链接
       
       
       链接
       

v-on 可以直接用 “＠” 来缩写：

      点击隐藏
      
      点击隐藏

使用语法糖可以简化代码的书写， 从下一章开始， 所有示例的 v-bind 和 v-on 指令将默认使用语法糖的写法。