梅花三

vue学习

1. 安装node，直接官网下载安卓即可，会自动安装上npm。

网址：https://nodejs.org

2. 检测node是否安装成功，在终端输入：node -v 以及 npm -v，若有版本信息，则安装成功。

若报错：‘npm’ 不是内部或外部命令，也不是可运行的程序
检查是否配置环境变量。计算机属性 --> 高级系统设置 --> 环境变量 --> 系统变量 --> Path，查看是否有node的路径，若没有，将node的安装路径添加在Path后面，注意路径之前用英文分号";"分割。

3. 全局安装cli3

npm install -g @vue/cli
vue -V(大写) 查看vue版本信息，若有信息则安装成功。
若报错：‘vue’ 不是内部或外部命令，也不是可运行的程序
电脑下全局搜索"vue.cmd"，将其路径添加在系统环境变量Path里。

4. cd到工作目录，使用vue ui可视化创建项目。开始新建项目。

5. 安装完成后，我们在刚刚创建的项目根目录添加一个文件：vue.config.js

里面的代码为：

module.exports = {
    baseUrl: './',
    filenameHashing: false
}

执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，如果不要 hash ，只需要配置 vue.config.js 文件中的 filenameHashing为false; baseUrl配置跟路径。

6. 完成后在可视化界面添加插件

7. 任务 --> serve --> 运行，开启项目，localhost:8080查看项目

8. cdn

开发环境cdn:  
生产环境cdn:

Vue学习

介绍

指令v-

绑定：v-bind: 将元素节点特性与Vue实例属性保持一致；
条件：v-if= true显示，false隐藏；
循环：v-for= 绑定数组的数据来渲染一个项目列表；


    
        
            {
    { todo.name }}
        
    


var app = new Vue({
        el: '#app',
        data: {
            message: '0',
            name: 'biu',
            todos: [
                {name: 'biu',},
                {name: 'cindy',},
                {name: 'becky',},
                {name: 'davina',},
            ]
        }
    })
    apiready = function() {
        app.todos.push({name: 'Emily'});
    }

事件：v-on: 添加一个事件监听器，通过它调用在Vue实例中定义的方法；


    {
    { message }}
    


var app = new Vue({
        el: '#app',
        data: {
            message: 'What a handsome boy !'
        },
        methods: {
            reverseMsg: function() {
                this.message = this.message.split('').reverse().join('').toUpperCase()
            }
        }
    });

双向绑定：v-model= 实现表单输入和应用状态之间的双向绑定


    
    {
    { message }}


var app = new Vue({
    el: '#app',
    data: {
        message: 'write what you wanna'
    },
});

组件化应用构建

允许使用小型、独立和通常可复用的组件构建大型应用。
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。
在Vue中注册组件：


Vue.component('todo-item', {
    template: 'Waiting for using'
})

注意点：需要在实例化之前注册组件


Vue.component('todo-item', {
    props: ['todo'],
    template: '{
    { todo.text }}'
})

然后，可以使用v-bind指令将待办项传到循环输出的每个组件中：


    
      
    


Vue.component('user-item', {
  props: ['user'],
  template: '{
    { user.name }}'
})

var app = new Vue({
  el: '#app',
  data: {
    users: [
      {id: 0, name: 'biu'},
      {id: 1, name: 'cindy'},
      {id: 2, name: 'becky'},
      {id: 3, name: 'davina'}
    ]
  },
})
v-bind绑定的属性名与props的接受参数名必须相同

Vue实例

创建一个Vue实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：

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

变量名vm(ViewModel)表示Vue的实例。
一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。
所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

数据与方法

当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

//数据对象  
var data = {a: 1}

//该对象被加入到一个Vue实例中
var vm = new Vue({
    data: data
})

//获得这个实例上的属性
//返回源数据中对应的字段
vm.a == data.a // => true

//设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
 
//...反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。只有当实例被创建时，data中存在的属性才是响应式的。也就是说如果添加一个新的属性，比如：

vm.b == 'hello'

那么对b的改动将不会触发任何视图的更新。若果知道后续会需要某个属性，可以创建实例时为它设置一些初始值。

Object.freeze()，会阻止修改现有的属性，意味着响应式系统无法再追踪变化。

var obj = {
    foo: 'bar'
}

Object.freeze(obj)

new Vue({
    el: '#app',
    data: obj
})

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。

var data = {a: 1}
var vm = new Vue({
    el: '#app',
    data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('app') // => true

// $watch 是一个实例方法
vm.$watch('a', function(newValue, oldValue) {
    //这个回调将在`vm.a`改变后调用
})

实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如created钩子可以用来在一个实例被创建之后执行代码。也有一些其他的钩子，在实例生命周期的不同阶段被调用，如mounted、updated和destroyed。
生命周期钩子的this上下文指向调用它的Vue实例。
不要在选项属性或回调上使用箭头函数，比如

created:() => console.log(this.a)或
vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致
Uncaught TypeError: Cannot read property of undefined 或 
Uncaught TypeError: this.myMethod is not a function 之类的错误。

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合相应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

插值

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：

Message: {
    { msg }}

Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
通过使用v-once指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新。但这会影响到该节点上的其它数据绑定：


    the value won't change: {
    { msg }}
    
    未使用v-once，会跟着变化: {
    { msg }}


var app = new Vue({
  el: '#app',
  data: {
    msg: 'biu'
  },
})

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令：

you'll see red words: 

var app = new Vue({
      el: '#app',
      data: {
        msg: 'red words'
      },
    })

特性

Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
对于布尔特性（它们只要存在就意味着值为true，否则为false，即绑定的属性值为：非字符串类型的null,undefined,false时是false）：

如果isDisabled的值是null、undefined或false，则disabled特性甚至不会被包含在渲染出来的元素中。



var app = new Vue({
  el: '#app',
  data: {
    isDisabled: null
    //null,undefined,false为false
    //"null","undefined","false"为true
  },
  methods: {
    popalert() {
      alert(1)
    }
  }
})

使用JavaScript表达式

对于所有的数据绑定，Vue.js提供了完全的JavaScript表达式支持。

{
    { number + 1 }}
{
    { ok ? 'YES' : 'No' }}
{
    { message.split('').reverse().join('') }}

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。


{
    { var a = 1 }}


{
    { if(ok) {return message} }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Data。不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令(Directives)是带有v-前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，相应式地作用于DOM。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

动态参数

用方括号括起来的JavaScript表达式作为一个指令的参数：

...

这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果Vue实例有一个data属性attributeName，其值为’href’，那么这个绑定等价于v-bind:href。
同样地，可以使用动态参数为一个动态的事件名绑定处理函数：

...

对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在HTML特性名里是无效的。同样，在DOM中使用模板时，需要回避大写键名。

..

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
如果在DOM中使用模板（直接在一个HTML文件里撰写模板），需要留意浏览器会把特性名全部强制转为小写：

...

修饰符

修饰符(modifier)是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():

...

缩写

v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性。

v-bind缩写为冒号(:)
v-on缩写为@

计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，应当使用计算属性。

div id="app">
    {
    { message }}

    {
    { newmsg }}



var vm = new Vue({
    el: '#app',
    data: {
        message: 'biu'
    },
    computed: {
        newmsg: function() {
            
            return this.message.split('').reverse().join(' ')
        }
    }
})

可以像绑定普通属性一样在模板中绑定计算属性。

计算属性缓存vs方法

可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问newmsg计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性vs侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。


    {
    { fullName }}
    

    
    


var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'biu',
        lastName: 'huang',
        fullName: 'biu haung'
    },
    watch: {
        firstName: function(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function(val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
})

上面代码是命令式且重复的。用计算属性将简便的多。

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'biu',
        lastName: 'huang'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName
        }
    }
})

侦听器watch

当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。


  
    Ask a yes/no question:
    
  
  {
    { answer }}


var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})

Class与Style绑定

v-bind可以绑定表达式，表达式结果的类型可以是字符串，对象或数组。

绑定HTML Class

对象语法

我们可以传给v-bind:class一个对象，以动态地切换class：

上面的语法表示active这个class村子与否将取决于数据属性isActive的truthiness(真或假)。
v-bind:class指令也可以与普通的class属性共存。



data: {
    isActive: true,
    hasError: false
}

结果为：

绑定的数据对象不必内联定义在模板里：



data: {
    classObject: {
        active: true,
        'text-danger': false
    }
}

也可以绑定一个返回对象的计算属性：



data: {
    isActive: true,
    error: null
},
computed: {
    classObject: function() {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

数组语法

我们可以把一个数组传给v-bind:class，以应用一个class列表：



data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}

渲染为：

如果想根据条件切换列表中的class，可以使用三元表达式：

数组语法中也可以使用对象语法：

用在组件上

当在一个自定义组件上使用class属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

声明组件：
Vue.component('my-component', {
    template: 'Hi'
})

然后使用的时候添加一些class:


HTML将被渲染为：
Hi

对于带数据绑定class也同样适用：

绑定内联样式

对象语法

v-bind:style的对象语法十分直观–看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式或短横线分隔（需要用引号括起来）来命名：



data: {
    activeColor: 'red',
    fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：



data: {
    styleObject: {
        color: 'red',
        fontSize: '13px'
    }
}

数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

自动添加前缀

当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

多重值

可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，如：

这样写只会渲染数组中最后一个被浏览器支持的值。

条件渲染

v-if

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。
也可以用v-else添加一个’else’块：

Vue is awesome!
Oh no

在元素上使用v-if条件渲染分组

因为v-if是一个指令，所有必须将它添加到一个元素上。如果想切换多个元素，可以把一个元素当作不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含元素。

v-else

可以使用v-else指令来表示v-if的’else’块。
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。

v-else-if

充当v-if的’else-if’块，可以连续使用。
类似于v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。

用key管理可复用的元素

表示某个元素是完全独立的，不能被复用。可以添加一个具有唯一值的key属性。

v-show

根据条件展示元素。
带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
v-show不支持元素，也不支持v-else.

v-if vs v-show

v-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-if与v-for一起使用

不推荐同时使用v-if和v-for。
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

列表渲染

用v-for把一个数组对应为一组元素

可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
在v-for块中，可以访问所有父作用域的属性。v-for还支持一个可选的第二个参数，即当前项的索引。


    
        {
    { parentMessage }} - {
    { index }} - {
    { item.message }}
    



var vm = new Vue({
    el: '#example',
    data: {
        parentMessage: 'Parent',
        items: [
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

也可以使用of替代in作为分隔符，因为它更接近JavaScript迭代器的语法：

在v-for里使用对象

可以用v-for来遍历一个对象的属性。
也可以提供第二个的参数为property名称（键名）。
还可以用第三个参数作为索引。


    {
    { index }}. {
    { name }}: {
    { value }}

在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下都一致。

维护状态

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（如：表单输入值）的列表渲染输出。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性：

建议尽可能在使用v-for时提供key attribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
不要使用对象或数组之类的非基本类型值作为v-for的key。需要用字符串或数值类型的值。

数组更新检测

变异方法

Vue将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹的方法包括：

push()
pop()
shift()
unshift()
splice()
reverser()

替换数组

变异方法，会改变调用了这些方法的原始数组。相比之下，也有非变异方法，例如：filter(), concat()和slice()。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example.items = example.items.filter(function(item) {
    return item.message.match(/foo/)
})

注意事项

由于JavaScript的限制，Vue不能检测以下数组的变动：

当利用索引直接设置一个数组项时，例如：vm.items[index] = newValue
当修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和vm.items[index] = newValue相同的效果，同时也将在响应式系统内触发状态更新。


Vue.set(vm.items, index, newValue)


vm.items.splice(index, 1, newValue)

也可以使用vm.$set实例方法，该方法是全局方法Vue.set的一个别名：

vm.$set(vm.items, index, newValue)

为了解决第二类问题，可以使用splice：

vm.items.splice(newLength)

对象变更检测注意事项

由于JavaScript的限制，Vue不能检测对象属性的添加或删除：

var vm = new Vue({
    data: {
        a: 1
    }
})
// vm.a 现在是响应式的

vm.b = 2
// vm.b 不是响应式的

对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可以使用Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。

var vm = new Vue({
    data: {
        userProfile: {
            name: 'biu'
        }
    }
})

可以添加一个新的age属性到嵌套的userProfile对象：

Vue.set(vm.userProfile, 'age', 18)

还可以使用vm.$set实例方法，它是全局Vue.set的别名。

vm.$set(vm.userProfile, 'age', 18)

有时可能需要为已有对象赋值多个新属性，比如使用Object.assign()或_.extend()。这种情况下，应该用两个对象的属性创建一个新的对象。
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

错误使用方式：
Object.assign(vm.userProgile, {
    age: 18,
    favoriteColor: 'yellow'
})

正确使用方式：
vm.userProfile = Object.assign({}, vm.userProfile, {
    age: 18,
    favoriteColor: 'yellow'
})

显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

 {
    { n }}

data: {
    numbers: [1, 2, 3, 4, 5]
},
computed: {
    evenNumbers: function() {
        return this.numbers.filter(function(number) {
            return number % 2 === 0
        })
    }
}

在计算属性不适用的情况下（例如：在嵌套v-for循环中），可以使用一个方法：

{
    { n }}

data: {
    numbers: [1, 2, 3, 4, 5]
},
methods: {
    even: function(numbers) {
        return numbers.filter(function(number) {
            return number % 2 === 0
        })
    }
}

在v-for里使用值范围

v-for也可以接受整数。在这种情况下，它会把模板重复对应次数。


    {
    { n }}


结果：
1 2 3 4 5 6 7 8 9 10

在上使用v-for

类似于v-if，也可以利用带有v-for的来循环渲染一段包含多个元素的内容。

v-for与v-if一同使用

不推荐在同一元素上使用v-if和v-for。
当它们处于同一节点，v-for的优先级比v-if更改，这意味着v-if将分别重复运行于每个v-for循环中。当只想为部分项渲染节点时，这种优先级的机制会十分有用，如：


    {
    { todo }}

以上代码将只渲染未完成的todo

而如果目的是有条件地跳过循环的执行，那么可以将v-if置于外层元素（或）上，如：


    
        {
    { todo }}
    

No todos left!

在组件上使用v-for

在自定义组件上，可以像在任何普通元素上一样使用v-for。

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，需要使用prop：

不自动将item注入到组件里的原因是，这会使用组件与v-for的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。


  
    Add a todo
    
    
  
  
    
  


Vue.component('todo-item', {
  template: '\
    \
      {
    { title }}\
      \
    \
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

事件处理

监听事件

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

事件处理方法

v-on可以接收一个需要调用的方法名称。

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法。
有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：



methods: {
    warn: function(message, event) {
        if(event) event.preventDefault()
        alert(message)
    }
}

事件修饰符

修饰符是由点开头的指令后缀来表示的。

.stop  //阻止单击事件继续传播

.prevent  //提交事件不再重载页面

//修饰符可以串联


//只有修饰符


.capture  //添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

.self  //只当在event.target是当前元素自身时触发处理函数

.once  //点击事件将只会触发一次

.passive  //滚动事件的默认行为（即滚动行为）将会立即触发，而不会等待onScroll完成，这其中包含event.preventDefault()的情况。
...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会展示一个警告。.passive会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

//只有在key是Enter时调用vm.submit()


可以直接将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符。

按键码

keyCode的事件用法已经被废弃了并可能不会被最新的浏览器支持。

为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名：

.enter  .tab  .delete(捕获"删除"和"退格"键)  .esc  .space  .up  .down  .left  .right

有一些按键（.esc以及所有的方向键）在IE9中有不同的key值，如果想支持IE9，这些内置的别名应该是首选。
还可以通过全局config.keyCodes对象自定义按键修饰符别名：

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl  .alt  .shift  .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。





Do something

注意修饰键与常规按键不同，在和keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact修饰符

允许控制由精确的系统修饰符组合触发的事件。

鼠标按钮修饰符

.left  .right  .middle

这些修饰符会限制处理函数仅相应特定的鼠标按钮。

为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在JavaScript里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

表单输入绑定

基础用法

可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值。
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素使用value属性和input事件；
checkbox和radio使用checked属性和change事件；
select字段将value作为prop并将change作为事件。

多行文本

Multiline message is: 
{
    { message }}

pre-line: 合并空白符序列，但是保留换行符。

复选框

单个复选框，绑定到布尔值：


{
    { checked }}

多个复选框，绑定到同一个数组：


  
  Jack
  
  John
  
  Mike
  

  Checked names: {
    { checkedNames }}


new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

单选按钮


  
  One
  

  
  Two
  

  Picked: {
    { picked }}


new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

选择框

单选时：


  
  Selected: {
    { selected }}


new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
多选时 (绑定到一个数组)：


  
  

  Selected: {
    { selected }}


new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

用 v-for 渲染的动态选项：


Selected: {
    { selected }}

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框



// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

单选按钮



// 当选中时
vm.pick === vm.a

选择框的选项



// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

组件基础

基本示例

组件是可复用的Vue实例，且带有一个名字。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。


    

    
// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
    data: function() {
        return {
            count: 0
        }
    },
    template: ''
})

new Vue({
    el: '#app',
})

因为组件是可复用的Vue实例，所有它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

组件的复用

可以将组件进行任意次数的复用。
每个组件都会各自独立维护它的数据。因为每用一次组件，就会有一个它的新实例被创建。

data必须是一个函数

当定义组件时，它的data并不是直接提供一个对象，如下：

data: {
    count: 0
}

取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

data: function() {
    return {
        count: 0
    }
}

组件的组织

通常一个应用会以一颗嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便Vue能够识别。有两种组件的注册类型：全局注册和局部注册。
Vue.component全局注册。

Vue.component('my-component-name', {
    ...
})

全局注册的组件可以用在其被注册之后的任何（通过new Vue）新创建的Vue根实例，也包括其组件树中的所有子组件的模板中。

通过Prop向子组件传递数据

Prop是可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。可以用props选项将值包含在该组件可接受的prop列表中：

Vue.component('blog-post', {
    props: ['title'],
    template: '{
    { title }}'
})

一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。能够在组件实例中访问这个值，就像访问data中的值一样。
一个prop被注册之后，就可以把数据作为一个自定义特性传递。


    
    
    


Vue.component('biu', {
    props: ['name'],
    template: '{
    { name }}'
})
new Vue({
    el: '#app'
})

可以使用v-bind来动态传递prop，如在v-for中循环渲染组件。

单个根元素

每个组件必须只有一个根元素。

监听子组件事件

父级组件可以像处理native DOM事件一样通过v-on监听子组件实例的任意事件。

同时子组件可以通过调用内建的$emit方法并传入事件名称来触发一个事件。

使用事件抛出一个值

可以使用$emit传递第二个参数。

当在父级组件监听这个事件时，可以通过$event访问到被抛出的这个值。

或者，如果这个事件处理函数是一个方法：

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

在组件上使用v-model

自定义事件也可以用于创建支持v-model的自定义输入组件。



等价于：

 
  当用在组件上时，v-model则会这样： 
  
 
  为了让它正常工作，这个组件内的必须：
 将其value特性绑定到一个名叫value的prop上
 在其input事件被触发时，将新的值通过自定义的input事件抛出。 
  Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})
 
  通过插槽分发内容 
  Vue.component('alert-box', {
    template: `
        
            Error!
            
        
    `
})
 
  动态组件 
  通过Vue的元素加一个特殊的is特性可以实现在不同组件之间进行动态切换。只要在data里弄个变量，给变量赋值就能动态的切换组件。 
  

 
  currentTabComponent可以包括：
 已注册组件的名字，或
 一个组件的选项对象 
  解析DOM模板时的注意事项 
  有些HTML元素，诸如ul、ol、table和select，对于哪些元素可以出现在其内部是有严格限制的。而有些原素，诸如li、tr和option，只能出现在其它某些特定的元素内部。可以使用is特性解决： 
  
    

 
  需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
 字符串 (例如：template: ‘…’)
 单文件组件 (.vue) 
  

Vue.component('hello-world', {
  template: '#hello-world-template'
})
 
  x-template 需要定义在 Vue 所属的 DOM 元素外。 
  控制更新 
  强制更新 
  你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。
 然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate 来做这件事。 
  通过 v-once 创建低开销的静态组件 
  渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样： 
  Vue.component('terms-of-service', {
  template: `
    
      Terms of Service
      ... a lot of static content ...
    
  `
})
 
   过渡&动画 
   
  进入/离开 & 列表过渡 
  概述 
  Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
 包括以下工具：
 在 CSS 过渡和动画中自动应用 class
 可以配合使用第三方 CSS 动画库，如 Animate.css
 在过渡钩子函数中使用 JavaScript 直接操作 DOM
 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 
  单元素/组件的过渡 
  Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
 条件渲染 (使用 v-if)
 条件展示 (使用 v-show)
 动态组件
 组件根节点 
  
  
  
    hello
  


new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
 
  当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同) 
  过渡的类名 
  在进入/离开的过渡中，会有 6 个 class 切换。
 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 
  v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 
  v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 
  v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 
  v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 
  v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 
  对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。 
  CSS过渡 
  常用的过渡都是使用CSS过渡。 
  
  
  
    hello
  


new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
 
  CSS动画 
  CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 
  
  
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
  


new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse; //reverse 反向操作
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
 
  自定义过渡的类名 
  可以通过以下特性来自定义过渡类名： 
  enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
 
  他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。 
  


  
  
    hello
  


new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})
 
  同时使用过渡和动画 
  Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。 
  但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。 
  显性的过渡持续时间 
  在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
 在这种情况下可以用 transition 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)： 
  ...
 
  也可以定制进入和移出的持续时间： 
  ...
 
  JavaScript 钩子 
  可以在属性中声明 JavaScript 钩子 
  
  


// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}
 
  这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
 一个使用 Velocity.js 的简单例子： 
  



  
  
    
      Demo
    
  


new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})
 
  初始渲染的过渡 
  可以通过 appear 特性设置节点在初始渲染的过渡 
  
  

 
  这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。 
  
  

 
  自定义 JavaScript 钩子： 
  
  

 
  在上面的例子中，无论是 appear 特性还是 v-on:appear 钩子都会生成初始渲染过渡。 
  多个元素的过渡 
  多个组件的过渡，对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： 
  
  
    
  
  Sorry, no items found.

 
  当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 组件中的多个元素设置 key 是一个更好的实践。
 示例： 
  
  
  

 
  在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为： 
  
  

 
  使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。 
  
  
  
  

 
  可以重写为： 
  
  


computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}
 
  过渡模式 
   的默认行为 - 进入和离开同时发生。
 同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
 in-out：新元素先进行过渡，完成之后当前元素过渡离开。
 out-in：当前元素先进行过渡，完成之后新元素过渡进入。 
  
  

 
  多个组件的过渡 
  多个组件的过渡简单很多 - 不需要使用 key 特性。相反，只需要使用动态组件： 
  A
B

  


new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: 'Component A'
    },
    'v-b': {
      template: 'Component B'
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
 
  列表过渡 
  目前为止，关于过渡我们已经讲到：
 单个节点
 同一时间渲染多个节点中的一个
 那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
 不同于 ，它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。
 过渡模式不可用，因为我们不再相互切换特有的元素。
 内部元素 总是需要 提供唯一的 key 属性值。 
  列表的进入/离开过渡 
  进入和离开的过渡使用之前一样的 CSS 类名。 
  
  
  
  
    
      {
    { item }}
    
  


new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
 
  这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，我们下面会解决这个问题。 
  列表的排序过渡 
   组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
 v-move 对于设置过渡的切换时机和过渡曲线非常有用。 
  


  
  
    
      {
    { item }}
    
  


new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

.flip-list-move {
  transition: transform 1s;
}
 
  内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列, 使用 transforms 将元素从之前的位置平滑过渡新的位置。 
  


  
  
  
  
    
      {
    { item }}
    
  


new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
 
  需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中 
  列表的交错过渡 
  通过 data 属性与 JavaScript 通信 ，就可以实现列表的交错过渡： 
  


  
  
    {
    { item.msg }}
  


new Vue({
  el: '#staggered-list-demo',
  data: {
    query: '',
    list: [
      { msg: 'Bruce Lee' },
      { msg: 'Jackie Chan' },
      { msg: 'Chuck Norris' },
      { msg: 'Jet Li' },
      { msg: 'Kung Fury' }
    ]
  },
  computed: {
    computedList: function () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '1.6em' },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
})
 
  可复用的过渡 
  过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 或者 作为根组件，然后将任何子组件放置在其中就可以了。 
  Vue.component('my-special-transition', {
  template: '\
    \
      \
    \
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})
 
  函数式组件更适合完成这个任务： 
  Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})
 
  动态过渡 
  在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。 
  
  

 
  当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。
 所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。 
  


  Fade In: 
  Fade Out: 
  
    hello
  
  
  


new Vue({
  el: '#dynamic-fade-demo',
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,
    stop: true
  },
  mounted: function () {
    this.show = false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    },
    leave: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 0 },
        {
          duration: this.fadeOutDuration,
          complete: function () {
            done()
            vm.show = true
          }
        }
      )
    }
  }
})
 
  最后，创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。 
  状态过渡 
  Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：
 数字和运算
 颜色的显示
 SVG 节点的位置
 元素的大小和其他的属性
 这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。 
  状态动画与侦听器 
  通过侦听器我们能监听到任何数值属性的数值更新。可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子： 
  


  
  {
    { animatedNumber }}


new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }
})
 
  对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值，通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子： 
  



  
  
  Preview:
  
  {
    { tweenedCSSColor }}


var Color = net.brehaut.Color

new Vue({
  el: '#example-7',
  data: {
    colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()

      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})

.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}
 
  动态状态过渡 
  就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。 
  把过渡放到组件里 
  管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。 
  


   +
   =
  {
    { result }}
  
     +
     =
    
  


// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component('animated-integer', {
  template: '{
    { tweeningValue }}',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween: function (startValue, endValue) {
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()

      animate()
    }
  }
})

// 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
  el: '#example-8',
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function () {
      return this.firstNumber + this.secondNumber
    }
  }
})
 
  赋予设计以生命 
  


    
    
    
    Document
    
    


    
  Move your mouse or tap
  













 
   可复用性 & 组合 
   
  混入 
  基础 
  混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 
  // 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"
 
  选项合并 
  当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 
  var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})
 
  同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 
  var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"
 
  值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。 
  var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
 
  全局混入 
  混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 
  // 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"
 
  自定义选项合并策略 
  自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数： 
  Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}
 
  对于多数值为对象的选项，可以使用与 methods 相同的合并策略： 
  var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
 
  可以在 Vuex 1.x 的混入策略里找到一个更高级的例子： 
  const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}
 
  自定义指令 
  简介 
  除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
 聚焦输入框的例子,在打开页面后还没点击过任何内容，输入框就应当还是处于聚焦状态 
  // 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
  如果想注册局部指令，组件中也接受一个 directives 的选项： 
  directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
 
  然后可以在模板中任何元素上使用新的 v-focus 属性 
  
 
  钩子函数 
  一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
 bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 
  inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 
  update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 
  unbind：只调用一次，指令与元素解绑时调用。 
  钩子函数参数 
  指令钩子函数会被传入以下参数：
 el：指令所绑定的元素，可以用来直接操作 DOM 。
 binding：一个对象，包含以下属性：
 name：指令名，不包括 v- 前缀。
 value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
 expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
 arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
 vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
 这是一个使用了这些属性的自定义钩子样例： 
  

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '
' +
      'value: '      + s(binding.value) + '
' +
      'expression: ' + s(binding.expression) + '
' +
      'argument: '   + s(binding.arg) + '
' +
      'modifiers: '  + s(binding.modifiers) + '
' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})
 
  指令的参数可以是动态的。例如，在 v-mydirective:argument=[dataproperty] 中，argument 是一个赋值给这个指令钩子 binding 参数中的 arg property 的字符串，同时 dataproperty 是一个引用到组件实例上并赋值给同一个 binding 参数中的 value property 的 data property。当指令钩子被调用的时候，binding 参数中的 value property 会基于 dataproperty 的值动态改变。
 一个使用了动态参数的自定义指令的例子如下： 
  
  Scroll down the page
  I’ll now be offset from the left instead of the top


Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg == 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
})

// start app
new Vue({
  el: '#app',
  data() {
    return {
      dynamicleft: 500
    }
  }
})
 
  函数简写 
  在 bind 和 update 时触发相同行为，而不关心其它的钩子。 
  Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
 
  对象字面量 
  如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。 
  
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})
 
  渲染函数 & JSX 
  基础 
  Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
 让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题： 
  
  
    Hello world!
  

 
  对于上面的 HTML，你决定这样定义组件接口： 
  Hello world!
 
  当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现： 
  

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
 
  这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。
 虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子： 
  Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
 
  节点、树以及虚拟 DOM 
  在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例： 
  
  My title
  Some text content
  

 
  只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里： 
  {
    { blogTitle }}
 
  或者一个渲染函数里： 
  render: function (createElement) {
  return createElement('h1', this.blogTitle)
}
 
  在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。 
  虚拟 DOM 
  Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码： 
  return createElement('h1', this.blogTitle)
 
  createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。 
  createElement 参数 
  接下来你需要熟悉的是如何在 createElement 函数中使用模板中的那些功能。这里是 createElement 接受的参数： 
  // @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)
 
  深入数据对象 
  有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML 特性，也允许绑定如 innerHTML 这样的 DOM 属性 (这会覆盖 v-html 指令)。 
  {
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
 
  完整示例 
  var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 创建 kebab-case 风格的 ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
 
  约束 
  VNode 必须唯一
 组件树中的所有 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的： 
  render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}
 
  如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落： 
  render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}
 
  使用 JavaScript 代替模板功能 
  v-if 和 v-for 
  只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。比如，在模板中使用的 v-if 和 v-for： 
  
  {
    { item.name }}

No items found.
 
  这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写： 
  props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}
 
  v-model 
  渲染函数中没有与 v-model 的直接对应——你必须自己实现相应的逻辑： 
  props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}
 
  这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。 
  事件 & 按键修饰符 
  对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on： 
  修饰符	前缀
.passive	&
.capture	!
.once	~
.capture.once 或
.once.capture	~!
 
  例如: 
  on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}
 
  对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法： 
  修饰符	处理函数中的等价操作
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
按键：
.enter, .13	if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码)
修饰键：
.ctrl, .alt, .shift, .meta	if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)
 
  这里是一个使用所有修饰符的例子： 
  on: {
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素
    // 则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是 enter 键或者
    // 没有同时按下 shift 键
    // 则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }
}
 
  插槽 
  你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组： 
  render: function (createElement) {
  // ``
  return createElement('div', this.$slots.default)
}
 
  也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数： 
  props: ['message'],
render: function (createElement) {
  // ``
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}
 
  如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段： 
  render: function (createElement) {
  return createElement('div', [
    createElement('child', {
      // 在数据对象中传递 `scopedSlots`
      // 格式为 { name: props => VNode | Array }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}
 
  JSX 
  如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦： 
  createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)
 
  特别是对应的模板如此简单的情况下： 
  
  Hello world!

 
  这就是为什么会有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。 
  import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      
        Hello world!
      
    )
  }
})
 
  将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。 
  函数式组件 
  之前创建的锚点标题组件是比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。
 在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。
 一个函数式组件就像这样： 
  Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})
 
  注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的特性都会被自动隐式解析为 prop。
 在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明： 
  
 
  组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：
 props：提供所有 prop 的对象
 children: VNode 子节点的数组
 slots: 一个函数，返回了包含所有插槽的对象
 scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
 data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
 parent：对父组件的引用
 listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
 injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。
 在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context 参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。
 因为函数式组件只是函数，所以渲染开销也低很多。
 在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：
 程序化地在多个组件中选择一个来代为渲染；
 在将 children、props、data 传递给子组件之前操作它们。
 下面是一个 smart-list 组件的例子，它能根据传入 prop 的值来代为渲染更具体的组件： 
  var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})
 
  向子元素或子组件传递特性和事件 
  在普通组件中，没有被定义为 prop 的特性会自动添加到组件的根元素上，将已有的同名特性进行替换或与其进行智能合并。
 然而函数式组件要求你显式定义该行为： 
  Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // 完全透传任何特性、事件监听器、子节点等。
    return createElement('button', context.data, context.children)
  }
})
 
  通过向 createElement 传入 context.data 作为第二个参数，我们就把 my-functional-button 上面所有的特性和事件监听器都传递下去了。事实上这是非常透明的，以至于那些事件甚至并不要求 .native 修饰符。
 如果你使用基于模板的函数式组件，那么你还需要手动添加特性和监听器。因为我们可以访问到其独立的上下文内容，所以我们可以使用 data.attrs 传递任何 HTML 特性，也可以使用 listeners (即 data.on 的别名) 传递任何事件监听器。 
  
 
  slots() 和 children 对比 
  你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗？在一些场景中，是这样——但如果是如下的带有子节点的函数式组件呢？ 
  
  
    first
  
  second

 
  对于这个组件，children 会给你两个段落标签，而 slots().default 只会传递第二个匿名段落标签，slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots()，因此你可以选择让组件感知某个插槽机制，还是简单地通过传递 children，移交给其它组件去处理。 
  模板编译 
  Vue 的模板实际上被编译成了渲染函数。这是一个实现细节，通常不需要关心。但如果你想看看模板的功能具体是怎样被编译的，可能会发现会非常有意思。 
  插件 
  插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
 添加全局方法或者属性。如: vue-custom-element
 添加全局资源：指令/过滤器/过渡等。如 vue-touch
 通过全局混入来添加一些组件选项。如 vue-router
 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router 
  使用插件 
  通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成： 
  // 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})
 
  也可以传入一个可选的选项对象： 
  Vue.use(MyPlugin, { someOption: true })
 
  Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()： 
  // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)
 
  开发插件 
  Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象： 
  MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
 
  过滤器 
  Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 
  
{
    { message | capitalize }}



 
  你可以在一个组件的选项中定义本地的过滤器： 
  filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
 
  或者在创建 Vue 实例之前全局定义过滤器： 
  Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})
 
  过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
 过滤器可以串联： 
  {
    { message | filterA | filterB }}
 
  在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
 过滤器是 JavaScript 函数，因此可以接收参数： 
  {
    { message | filterA('arg1', arg2) }}
 
  这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。 
   单文件组件 
   
  介绍 
  在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
 这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
 文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。 
  怎么看待关注点分离？ 
  一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
 即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。 
  



 
  单元测试 
  Vue CLI 拥有开箱即用的通过 Jest 或 Mocha 进行单元测试的内置选项。我们还有官方的 Vue Test Utils 提供更多详细的指引和自定义设置。 
  简单的断言 
  不必为了可测性在组件中做任何特殊的操作，导出原始设置就可以了： 
  


 
  然后随着 Vue 导入组件的选项，你可以使用许多常见的断言 (这里我们使用的是 Jasmine/Jest 风格的 expect 断言作为示例)： 
  // 导入 Vue.js 和组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。

describe('MyComponent', () => {
  // 检查原始组件选项
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })

  // 评估原始组件选项中的函数的结果
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })

  // 检查 mount 中的组件实例
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })

  // 创建一个实例并检查渲染输出
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})
 
  编写可被测试的组件 
  很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子： 
  


 
  你可以在不同的 props 中，通过 propsData 选项断言它的渲染输出： 
  import Vue from 'vue'
import MyComponent from './MyComponent.vue'

// 挂载元素并返回已渲染的文本的工具函数
function getRenderedText (Component, propsData) {
  const Constructor = Vue.extend(Component)
  const vm = new Constructor({ propsData: propsData }).$mount()
  return vm.$el.textContent
}

describe('MyComponent', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')

    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})
 
  断言异步更新 
  由于 Vue 进行 异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 Vue.nextTick 回调中进行： 
  // 在状态更新后检查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'

  // 在状态改变后和断言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})
 
  TypeScript 支持 
  Vue CLI 内置了 TypeScript 工具支持。在 Vue 的下一个大版本 (3.x) 中也计划了相当多的 TypeScript 支持改进，包括内置的基于 class 的组件 API 和 TSX 的支持。 
  发布为 NPM 包的官方声明文件 
  静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeScript 的官方类型声明，还为 Vue Router 和 Vuex 也提供了相应的声明文件。
 而且，我们已经把它们发布到了 NPM，最新版本的 TypeScript 也知道该如何自己从 NPM 包里解析类型声明。这意味着只要你成功地通过 NPM 安装了，就不再需要任何额外的工具辅助，即可在 Vue 中使用 TypeScript 了。 
  推荐配置 
  // tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}
 
  注意你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。 
  开发工具链 
  工程创建 
  Vue CLI 3 可以使用 TypeScript 生成新工程。创建方式： 
  # 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name
 
  编辑器支持 
  要使用 TypeScript 开发 Vue 应用程序，建议使用 Visual Studio Code，它为 TypeScript 提供了极好的“开箱即用”支持。如果你正在使用单文件组件 (SFC), 可以安装提供 SFC 支持以及其他更多实用功能的 Vetur 插件。
 WebStorm 同样为 TypeScript 和 Vue 提供了“开箱即用”的支持。 
  基本用法 
  要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件： 
  import Vue from 'vue'
const Component = Vue.extend({
  // 类型推断已启用
})

const Component = {
  // 这里不会有类型推断，
  // 因为TypeScript不能确认这是Vue组件的选项
}
 
  基于类的 Vue 组件 
  如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器： 
  import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: ''
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'

  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}
 
  增强类型以配合插件使用 
  插件可以增加 Vue 的全局/实例属性和组件选项。在这些情况下，在 TypeScript 中制作插件需要类型声明。庆幸的是，TypeScript 有一个特性来补充现有的类型，叫做模块补充 (module augmentation)。
 例如，声明一个 string 类型的实例属性 $myProperty： 
  // 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'

// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}
 
  在你的项目中包含了上述作为声明文件的代码之后 (像 my-property.d.ts)，你就可以在 Vue 实例上使用 $myProperty 了。 
  var vm = new Vue()
console.log(vm.$myProperty) // 将会顺利编译通过
 
  你也可以声明额外的属性和组件选项： 
  import Vue from 'vue'

declare module 'vue/types/vue' {
  // 可以使用 `VueConstructor` 接口
  // 来声明全局属性
  interface VueConstructor {
    $myGlobal: string
  }
}

// ComponentOptions 声明于 types/options.d.ts 之中
declare module 'vue/types/options' {
  interface ComponentOptions {
    myOption?: string
  }
}
 
  上述的声明允许下面的代码顺利编译通过： 
  // 全局属性
console.log(Vue.$myGlobal)

// 额外的组件选项
var vm = new Vue({
  myOption: 'Hello'
})
 
  标注返回值 
  因为 Vue 的声明文件天生就具有循环性，TypeScript 可能在推断某个方法的类型的时候存在困难。因此，你可能需要在 render 或 computed 里的方法上标注返回值。 
  import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // 需要标注有 `this` 参与运算的返回值类型
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // 需要标注
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` 是可推导的，但是 `render` 需要返回值类型
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})
 
  如果你发现类型推导或成员补齐不工作了，标注某个方法也许可以帮助你解决这个问题。使用 --noImplicitAny 选项将会帮助你找到这些未标注的方法。 
  生产环境部署 
  开启生产环境模式 
  开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。 
  不使用构建工具 
  如果用 Vue 完整独立版本，即直接用 script 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。 
  使用构建工具 
  当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。 
  webpack 
  在 webpack 4+ 中，你可以使用 mode 选项： 
  module.exports = {
  mode: 'production'
}
 
  但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin： 
  var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}
 
  Browserify 
  在运行打包命令时将 NODE_ENV 设置为 “production”。这等于告诉 vueify 避免引入热重载和开发相关的代码。
 对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。例如： 
  NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
 
  或者在 Gulp 中使用 envify： 
  // 使用 envify 的自定义模块来定制环境变量
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // 必填项，以处理 node_modules 里的文件
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
 
  或者配合 Grunt 和 grunt-browserify 使用 envify： 
  // 使用 envify 自定义模块指定环境变量
var envify = require('envify/custom')

browserify: {
  dist: {
    options: {
        // 该函数用来调整 grunt-browserify 的默认指令
        configure: b => b
        .transform('vueify')
        .transform(
            // 用来处理 `node_modules` 文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}
 
  Rollup 
  使用 rollup-plugin-replace： 
  const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)
 
  模板预编译 
  当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。 
  预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。 
  如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。 
  提取组件的 CSS 
  当使用单文件组件时，组件内的 CSS 会以 style 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。 
  跟踪运行时错误 
  如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。 
   规模化 
   
  路由 
  官方路由 
  从零开始简单的路由 
  如果只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件： 
  const NotFound = { template: 'Page not found' }
const Home = { template: 'home page' }
const About = { template: 'about page' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})
 
  状态管理 
  类 Flux 状态管理的官方实现 
  由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex：受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试 (time travel debugging)。 
  简单状态管理起步使用 
  经常被忽略的是，Vue 应用中原始数据对象的实际来源 - 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享： 
  const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})
 
  现在当 sourceOfTruth 发生变化，vmA 和 vmB 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 this. $r o o t .$ data 去访问。现在我们有了唯一的数据来源，但是，调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。
 为了解决这个问题，我们采用一个简单的 store 模式： 
  var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}
 
  需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。
 此外，每个实例/组件仍然可以拥有和管理自己的私有状态： 
  var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
 
  接着我们继续延伸约定，组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具 
  服务端渲染 
  Nuxt.js 
  从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。 
   深入响应式原理 
   
  Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。 
  如何追踪变化 
  当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 
  这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。 
  每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染 
  检测变化的注意事项 
  受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如： 
  var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的
 
  对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于： 
  Vue.set(vm.someObject, 'b', 2)
 
  您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名： 
  this.$set(this.someObject,'b',2)
 
  有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。 
  // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
 
  声明响应式属性 
  由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值： 
  var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '{
    { message }}'
})
// 之后设置 `message`
vm.message = 'Hello!'
 
  如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。
 这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式属性，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。 
  异步更新队列 
  ue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
 例如，当你设置 vm.someData = ‘new value’，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如： 
  {
    {message}}

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})
 
  在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上： 
  Vue.component('example', {
  template: '{
    { message }}',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})
 
  因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2016 async/await 语法完成相同的事情： 
  methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}