本文共 3214 字，大约阅读时间需要 10 分钟。

从这一节开始，就开始正式的细节性、系统性的学习Vue.js！

Vue实例

构造器

每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：

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

一个 Vue 实例其实正是一个 中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：

var MyComponent = Vue.extend({  // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()

注意：尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

         现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }var vm = new Vue({  data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

除此之外，Vue实例暴露了一些有用的实例属性和方法，这些属性与方法都有前缀$,便于区分代理的数据属性。例如：

.var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true// $watch 是一个实例方法vm.$watch('a', function (newVal, oldVal) {  // 这个回调将在 `vm.a`  改变后调用})

实例生命周期

Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。

例如：created 钩子在实例创建后调用：

var vm = new Vue({  data: {    a: 1  },  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// -> "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 compiled、 ready 、destroyed。

钩子的 this 指向调用它的 Vue 实例。

有人可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分割在这些钩子中。

数据绑定语法

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 ，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

差值

文本：数据绑定最基础的形式是文本差值，使用双花括号（{

{message}}），每当这个属性变化时message也会更新。

Message:{
  {message}}

同时，也可以只处理单次差值，今后的数据变化就不会再引起差值更新了：

This will never change:{
  {*message}}

原始的HTML：双花括号标签将数据解析为纯文本而不是HTML，为了输出真的HTML字符串，需要用三标签：

   
    {
  {
  {raw_html}}}
   

HTML 特性：双标签可以用在HTML特性内

注意:在 Vue.js 指令和特殊特性内不能用插值。

绑定表达式

放在 双标签内的文本称为绑定表达式。在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

*有一个限制就是：每个绑定只能包含单个表达式。

过滤器：

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符”指示：

{
  {message | capitalize}}

这里我们将表达式 message 的值“管输（pipe）”到内置的 capitalize 过滤器，这个过滤器其实只是一个 ，返回大写化的值。Vue.js 提供数个内置过滤器。管道语法不是JS语法，不能在表达式内使用过滤器，只能添加到表达式的后面。

过滤器可以串联：

{
  {message | filterA|filterB }}

过滤器也可以接受参数：

{
  { message | filterA 'arg1' arg2 }}

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串  'arg1'  将传给过滤器作为第二个参数，表达式  arg2  的值在计算出来之后作为第三个参数。

指令：

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

Hello!

这里  v-if  指令将根据表达式  greeting  值的真假删除/插入  <p>  元素。

参数：有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性：

这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。

v-bind：可以简写为 ：

另一个例子是 v-on 指令，它用于监听 DOM 事件：

这里的参数是被监听的事件的名字。v-on：可以简写为 @

v-bind 和 v-on 的缩写是完全合理的，在Vue.js支持的浏览器中均能够被正确的解析，这也是两个最常用的指令！

修饰符：

修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式。

计算属性

模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

计算属性： vs.$watch

Vue.js 提供了一个方法 $watch，它用于观察 Vue 实例上的数据变动。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。

   
    {
  {fullName}}
   
var vm = new Vue({  data: {    firstName: 'Foo',    lastName: 'Bar'  },  computed: {    fullName: function () {      return this.firstName + ' ' + this.lastName    } } })

转载地址：http://wdlab.baihongyu.com/