[JavaScript知识库]Vue2.x API 学习

目录

Vue 2.x API

全局配置

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

ignoredElements

keyCodes

performance

productionTip

属性

$data

$props

$el

$options

$parent

$root

$children

$slots

$scopedSlots

$refs

$isServer

$attrs

$listeners

特殊属性

key

ref

is

slot

slot-scope

scope

数据【实例方法】

$watch

$set

$delete

事件

$on

$once

$off

$emit

全局函数

Vue.extend

Vue.nextTick

Vue.set

Vue.delete

Vue.directive

Vue.filter

Vue.component

Vue.use

Vue.mixin

Vue.compile

Vue.observable

Vue.version

数据【选项】

data

props

propsData

computed

methods

watch

DOM

el

template

render

renderError

指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

生命周期

$mount

$forceUpdate

$nextTick

生命周期调用方法

beforeCreate

created

beforeMount

Mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

资源

directives

filters

components

组件

Component

transition

transition-group

keep-alive

slot

组合

parent

mixins

extends

provide/inject

其它

name

delimiters

functional

model

inheritAttrs

comments

Vue 2.x API

API全称为Application Programming Interface，即应用程序接口。

全局配置

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改其中的一些属性。

silent

是否 取消 Vue 所有的日志与警告，默认值为false。

optionMergeStrategies

自定义合并策略的选项，默认值为{}。

devtools

是否 允许 vue-devtools 检查代码，开发版本默认值为 true，生产版本默认值为 false。

生产版本设为 true 可以启用检查。

errorHandler

指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。

用法：

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

warnHandler

为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。

ignoredElements

使 Vue 忽略在 Vue 之外的自定义元素 【使用了 Web Components APIs】。

keyCodes

给 v-on 自定义键位别名。

performance

是否 在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。默认为false。只适用于开发模式和支持 performance.mark API 的浏览器上。

productionTip

是否 在 vue 启动时生成生产提示。默认为true。

属性

$data

Vue 实例观察的数据对象【object】。

Vue 实例代理了对其 data 对象 property 的访问。

$props

当前组件接收到的 props 对象【object】。

Vue 实例代理了对其 props 对象 property 的访问。

$el

Vue 实例使用的根 DOM 元素【Element】。

$options

用于当前 Vue 实例的初始化选项【object】。

$parent

父实例，如果当前实例有的话【Vue instance（Vue 实例）】。

$root

当前组件树的根 Vue 实例【Vue instance】。

如果当前实例没有父实例，此实例将会是其自己。

$children

当前实例的直接子组件【Array <Vue instance>】。

注意：

????????$children 并不保证顺序，也不是响应式的。所以在使用 $children 来进行数据绑定时，可以考虑使用一个数组配合 v-for 来生成子组件。

$slots

用来访问被插槽分发的内容【 [name: string]: ?Array<VNode>】。每个具名插槽有其相应的 property。

在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。

注意：

????????插槽不是响应性的。如果需要一个组件可以在被传入的数据发生变化时重渲染，建议使用诸如 props 或 data 等响应性实例选项。

$scopedSlots

用来访问作用域插槽【[name: string]: props => Array<VNode> | undefined】。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

注意：从 2.6.0 开始，这个 property 有两个变化：

(1).作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。

(2).所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。在使用渲染函数时，不论当前插槽是否带有作用域，都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以轻松迁移到所有插槽都是函数的 Vue 3。

$refs

一个对象【Object】，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

$isServer

当前 Vue 实例 是否 运行于服务器【boolean】。

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)【[key: string]: string】。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器【[key: string]: Function | Array<Function>】。

它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

特殊属性

key

key【number | string | boolean | symbol】主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能地尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误。

最常见的用例是结合 v-for。

key 也可以用于强制替换元素/组件而不是重复使用它。在如下场景时它可能会很有用：

1. 完整地触发组件的生命周期钩子。

2. 触发过渡。

ref

ref【string】被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

如果用在子组件上，引用就指向组件。

注意：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候不能访问它们 。

$refs 不是响应式的，因此不应该试图用它在模板中做数据绑定。

is

is【string | Object (组件的选项对象)】用于动态组件且基于 DOM 内模板的限制来工作。

示例代码：

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>

slot

废弃。【string】用于标记往哪个具名插槽中插入子组件内容。

推荐改用?2.6.0 新增的 v-slot。

slot-scope

废弃。【function argument expression】用于将元素或组件表示为作用域插槽。

推荐改用v-slot。

scope

移除。用于表示一个作为带作用域的插槽的 <template> 元素。

推荐改用v-slot。

数据【实例方法】

$watch

语法：

????????vm.$watch( expOrFn, callback, [options] )

????????参数

????????options【object】

????????(1). deep【boolean】：是否监听对象内部值的变化。

????????(2). .immediate【boolean】：是否 立即以表达式的当前值触发回调。

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

vm.$watch 返回一个取消观察函数，用来停止触发回调。

示例代码：

<div id="msg">
  {{id}}:{{str}}
  <button v-on:click="++id,str='新的字符串'">点击</button>
</div>
<script>
  var data={id:1,str:'字符串'};
  var vm=new Vue({
    el:'#msg',
    data:data
  });

  $unwatch=vm.$watch(function(){
    return vm.id+12;
  },
  function(newValue,oldValue){
    console.log(newValue);      //点击按钮多次，只出现一次值：14
    console.log(oldValue);      //点击按钮多次，只出现一次值：13
    $unwatch(); //执行一次后取消此监听
  })

  vm.$watch('id',function(newValue,oldValue){
    //id值被修改后的回调函数处理代码
    console.log(newValue);      //点击按钮多次，出现的值依次为2,3,4,5,6,...
    console.log(oldValue);      //点击按钮多次，出现的值依次为1,2,3,4,5,...
  });
</script>

注意：

????????在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

$set

全局 Vue.set 的别名。返回值为设置的值。

语法：

????????vm.$set( target, propertyName/index, value )

$delete

全局 Vue.delete 的别名。

语法：

????????vm.$delete( target, propertyName/index )

事件

$on

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

语法：

????????vm.$on( event, callback )

$once

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

语法：

????????vm.$once( event, callback )

$off

移除自定义事件监听器。

语法：

????????vm.$off( [event, callback] )

????????参数

????????如果没有提供参数，则移除所有的事件监听器；

????????如果只提供了事件，则移除该事件所有的监听器；

????????如果同时提供了事件与回调，则只移除这个回调的监听器。

$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

语法：

????????vm.$emit( eventName, […args] )

示例代码：

<div id="test">
  <emit-self-control v-on:self-target-name="getRandomstr"></emit-self-control>
</div>
<script>
  Vue.component('emit-self-control',{
    data:function(){
      return {
        array1:['str1','str2','str3']
      }
    },
    methods:{
      setRandomStr:function(){
        var randomIndex=Math.floor(Math.random()*this.array1.length);
        //this.$emit('self-target-name',this.array1[randomIndex]);
        this.$emit('self-target-name',[this.array1[randomIndex],'another str']);
      }
    },
    template:`
      <button v-on:click="setRandomStr">
        获取随机字符串
      </button>
    `
  });

  new Vue({
    el:'#test',
    methods:{
      getRandomstr:function(args){
        alert(args);
      }
    }
  });
</script>

全局函数

Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

语法：

????????Vue.extend( options )

示例代码：

<div id="test">
</div>
<script>
//创建构造器
var profile=Vue.extend({
  template:'<p>{{A}},{{B}}</p>',
  data:function(){
    return {
      A:'Hello',
      B:'World'
    }
  }
});
//创建一个profile实例，并加载到一个元素上
new profile().$mount('#test');
</script>

注意：

????????data 选项是特例，在 Vue.extend() 中它必须是函数。

Vue.nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

语法：

????????Vue.nextTick( [callback, context] )

????????参数

????????callback【function】

????????context【object】

如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。

示例代码：

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用
Vue.nextTick()
.then(function () {
  // DOM 更新了
})

注意：

????????Vue 不自带 Promise??polyfill，解决办法可参考 文档《Shim、Polyfill》。

Vue.set

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property。

返回设置的值。

语法：

????????Vue.set( target, propertyName/index?,value)

????????参数

????????target【Object | Array】

????????propertyName【string】/index【number】

????????value【any】

注意：

????????目标对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.delete

删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制。

语法：

????????Vue.delete( target, propertyName/index )

注意：

????????目标对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.directive

注册或获取全局指令。

语法：

????????Vue.directive( id, [definition] )

????????参数

??????? id【string】

??????? definition【Function | Object】

Vue.filter

注册或获取全局过滤器。可以在一个组件的选项中定义本地的过滤器，也可以在在创建 Vue 实例之前全局定义过滤器。当全局过滤器和局部过滤器重名时，会采用局部过滤器。

语法：

????????Vue.filter( id, [definition] )

示例代码：

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

Vue.component

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。

语法：

????????Vue.component( id, [definition] )

示例代码：

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

Vue.use

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

语法：

????????Vue.use( plugin )

????????参数

????????plugin【Object | Function】

注意：

????????该方法需要在调用 new Vue() 之前被调用。

????????当 install 方法被同一个插件多次调用，插件将只会被安装一次。

Vue.mixin

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

语法：

????????Vue.mixin( mixin )

????????参数

????????mixin【Object】

Vue.compile

将一个模板字符串编译成 render 函数。只在完整版时可用。

语法：

????????Vue.compile( template )

????????参数

????????template【string】

示例代码：

<div id="test">
</div>
<script>
  var ctemplate=Vue.compile('<p>{{text}}</p>');
  var vm=new Vue({
    el:'#test',
    data:{
        text:'Hello World'
    },
    render:ctemplate.render
  });
</script>

Vue.observable

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

语法：

????????Vue.observable( object )

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景。

Vue.version

提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，可以根据不同的版本号采取不同的策略。

示例代码：

<script>
  var version=Number(Vue.version.split('.')[0]);
  if(version===2){
    console.log('Vue 2.X');
  }else if(version===3){
    console.log('Vue 3.X');
  }else{
    console.log('Unsupported Version.');
  }
</script>

数据【选项】

data

Vue 实例的数据对象【Object | Function】。

Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。

一旦观察过，就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。

注意：

1. 组件的data设置只接受 function。当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
2. 如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

props

props 【Array<string> | Object】用于接收来自父组件的数据。

如果props是对象，则允许配置高级选项，如类型检测、自定义验证和设置默认值。可以基于对象的语法使用以下选项：

1. type：【原生构造函数】String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。
2. default：any。为该 prop 指定一个默认值，如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
3. required：Boolean。定义该 prop 是否是必填项，在非生产环境中，如果这个值为true且该 prop 没有被传入的，则一个控制台警告将会被抛出。
4. validator：Function。自定义验证函数会将该 prop 的值作为唯一的参数代入，在非生产环境下，如果该函数返回false【验证失败】，一个控制台警告将会被抛出。

示例代码：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})
// 对象语法，提供验证
var vm2=Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})
var c2=new vm2({
  propsData:{
    height:123,
    age:23
  }
})
</script>

propsData

propsData【[key: string]: any 】用于创建实例时传递 props【只用于 new 创建的实例中】。主要作用是方便测试。

computed

计算【[key: string]: Function | { get: Function, set: Function }】属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

示例代码：

<script>
var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble:vm=>vm.a*2,
    aDouble2: function(){
      return this.a * 3;
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
console.log(vm.aPlus)     // 2
console.log(vm.aPlus=3)   // 3
console.log(vm.a)         // 2
console.log(vm.aDouble);  // 4
console.log(vm.aDouble2); // 6
</script>

注意:

????????如果为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问。

methods

methods【[key: string]: Function】 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

示例代码：

<script>
var vm=new Vue({
  data:{a:1},
  methods:{
    fun1:function(){
      this.a*=2;
    }
  }
})
vm.fun1();
console.log(vm.a); //2
</script>

注意：

????????不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

watch

这里watch【[key: string]: string | Function | Object | Array 】是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

示例代码：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意：

????????不应该使用箭头函数来定义 watcher 函数 。

DOM

el

【string | Element】提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

注意：

????????只在用 new 创建实例时生效。

template

一个模板【string】作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

注意：

1. 出于安全考虑，应该只使用信任的 Vue 模板。
2. 如果 Vue 选项中包含渲染函数，该模板将被忽略。

render

字符串模板的代替方案【(createElement: () => VNode) => VNode】，该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode【虚拟节点】。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

注意：

????????Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

renderError

【(createElement: () => VNode, error: Error) => VNode】

当 render 函数遭遇错误时，提供另外一种渲染输出，其错误将会作为第二个参数传递到 renderError。只在开发者环境下工作。

这个功能配合 hot-reload 非常实用。

示例代码:

<div id="test">

</div>
<script>
new Vue({
  render(h){
    throw new Error("加载出错啦");
  },
  renderError(h,e){
    return h('pre',{style:{color:'red'}},e.stack);
  }
}).$mount("#test");
</script>

指令

v-text

【string】更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

示例代码：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html

【string】更新元素的 innerHTML。

内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果针对 v-html 的内容设置带作用域的 CSS，可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 【Block Element Modify，块元素修改器】的作用域策略。

语法：

????????<div v-html="html?string"></div>

注意：

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-show

【any】根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。

v-if

【any】根据表达式的值的真假来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

示例代码：

<div id="test">
  <span v-if="cansee">可以看见</span>
</div>
<script>
  var v=new Vue({
    el:"#test",
    data:{
      cansee:true
    }
  })
</script>

注意：

????????当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。

v-else

为 v-if 或者 v-else-if 添加“else 块”。

v-else-if

【any】表示 v-if 的“else if 块”，可以链式调用。

示例代码：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

【Array | Object | number | string | Iterable】基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名。

语法：

????????不指定键名

????????????????<div v-for="item in items">

??????????????????{{ item.text }}

????????????????</div>

????????指定键名

????????????????<div v-for="(item, index) in items"></div>

????????????????<div v-for="(val, key) in object"></div>

????????????????<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，需要用特殊 attribute key 来提供一个排序提示。

示例代码一：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

示例代码二：

<div id="tarea1">
  <div v-for="item in arr1">
    {{item}}
  </div>
  <div v-for="(item,index) in arr1">
    序列号为{{index}}的值是:{{item}}
  </div>
  <div v-for="item in objarr2" :key="item.name">
    {{item.name}}的年龄是：{{item.age}}岁
  </div>
  <div v-for="(value,name,index) in objlist3">
    {{index}}.{{name}}今年{{value.age}}岁了，所在班级是{{value.class}}。
  </div>
</div>
<script>
  var v=new Vue({
    el:'#tarea1',
    data:{
      arr1:['str1','str2','str3'],
      objarr2:[{name:'小花',age:10},{name:'中花',age:30},{name:'大花',age:20}],
      objlist3:{'小明':{class:'1班',age:4},'大明':{class:'3班',age:6}}
    }
  });
  v.objarr2.push({name:'无花',age:1});
  //给js对象列表objlist3添加一项
  //方式一
  v.objlist3['中明']={class:'2班',age:5};
  //方式二
  // var newobj={'中明':{class:'2班',age:5}};
  // v.objlist3={
  //   ...v.objlist3,
  //   ...newobj
  // }
  //方式三
  // var newobj2={'中明':{class:'2班',age:5}};
  // Object.assign(v.objlist3,newobj2);

  console.log(v.objlist3);
</script>

注意：

????????从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

v-on

【Function | Inline Statement | Object】v-on【可简写为@】用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。

修饰符：

????stop ? ??? - 调用 event.stopPropagation()。

????prevent? - 调用 event.preventDefault()。

????capture? - 添加事件侦听器时使用 capture 模式。

????self ? ? ?? - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

????{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

????native ?? - 监听组件根元素的原生事件。

????once ? ?? - 只触发一次回调。

????left????? ?? - 只当点击鼠标左键时触发。

????right?? ? ? - 只当点击鼠标右键时触发。

????middle??? - 只当点击鼠标中键时触发。

????passive? - 以 { passive: true } 模式添加侦听器

使用语法示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

可在子组件上监听自定义事件 。

示例代码：

//当子组件触发“my-event”时将调用事件处理器。
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

注意：

????????从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

v-bind

【any (with argument) | Object (without argument)】动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

示例代码：

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

修饰符：

?? prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。

?camel - 将 kebab-case attribute 名转换为 camelCase【驼峰化】。 ??

?? sync - 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model

在表单控件或者组件上创建双向绑定。

修饰符：

lazy?????? - 取代 input 监听 change 事件

number - 输入字符串转为有效的数字

trim ? ? ? - 输入首尾空格过滤

v-slot

【缩写#】提供具名插槽或需要接收 prop 的插槽。

示例代码：

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

示例代码：

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例代码：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

示例代码：

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once:comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

生命周期

$mount

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

示例代码：

<div class="test1">
</div>
<script>
  var myComponent=Vue.extend({
    template:'<p>Hello World</p>'
  });

  //实现方式一
  var mount1=new myComponent().$mount('.test1');

  //实现方式二
  var mount2=new myComponent({el:'.test1'});

  //实现方式三（在文档之外渲染并且随后挂载）。
  var mount3=new myComponent().$mount();
  //console.log(document.getElementsByClassName('test1')[0]);
  var classNodes=document.getElementsByClassName('test1');
  for(var i=0;i<classNodes.length;i++){
    classNodes[i].appendChild(mount3.$el);
  }
</script>

$forceUpdate

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

语法：

????????vm.$nextTick( [callback] )

示例代码：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

注意：

????????如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise ?polyfill，解决办法可参考 文档《Shim、Polyfill》。

$destroy

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

注意：

????????在大多数场景中都不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

生命周期调用方法

所有的生命周期钩子自动绑定 this 上下文到实例中，因此可以访问数据，对 property 和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this.fetchTodos 的行为未定义。

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

此钩子在服务器端渲染期间不被调用。

Mounted

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted【已安装】 被调用时 vm.$el 也在文档内。

此钩子在服务器端渲染期间不被调用。

注意：

????????mounted 不会保证所有的子组件也都一起被挂载。可以等到整个视图都渲染完毕，在 mounted 内部使用 vm.$nextTick。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以这时可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

该钩子在服务器端渲染期间不被调用。

注意：

????????updated 不会保证所有的子组件也都一起被重绘。可以等到整个视图都重绘完毕，在 updated 里使用 vm.$nextTick。

????????示例代码：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

activated

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

deactivated

被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

errorCaptured

【(err: Error, vm: Component, info: string) => ?boolean】当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。

如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。

一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被处理了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

注意：

????????可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

资源

directives

【object】包含 Vue 实例可用指令的哈希表。

filters

【object】包含 Vue 实例可用过滤器的哈希表。

components

【object】包含 Vue 实例可用组件的哈希表。

组件

Component

渲染一个“元组件”为动态组件。

Props：

????is - string | ComponentDefinition | ComponentConstructor

????inline-template - boolean

示例代码：

// 依 is 的值，来决定哪个组件被渲染。
<!-- 动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

transition

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

Props：

?? name? - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"

????appear - boolean，是否在初始渲染时使用过渡。默认为 false。

????css????? - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

????type???? - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

????mode?? - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。

????duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

????enter-class - string

????leave-class - string

????appear-class - string

????enter-to-class - string

????leave-to-class - string

????appear-to-class - string

????enter-active-class - string

????leave-active-class - string

????appear-active-class - string

事件：

????before-enter

????before-leave

????before-appear

????enter

????leave

????appear

????after-enter

????after-leave

????after-appear

????enter-cancelled

????leave-cancelled (v-show only)

????appear-cancelled

示例代码：

<!-- 简单元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>
new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    }
  }
  ...
}).$mount('#transition-demo')

transition-group

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。

Props：

????tag - string，默认为 span

????move-class - 覆盖移动过渡期间应用的 CSS 类。

????除了 mode，其他 attribute 和 <transition> 相同。

事件：

????事件和 <transition> 相同。

示例代码：

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

注意：

????????每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作

keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

Props：

????include? - 字符串或正则表达式。只有名称匹配的组件会被缓存。

????exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

????max ? ?? - 数字。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。

示例代码：

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

注意：

????????1.<keep-alive> 是用在其一个直属的子组件被开关的情形。如果在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

????????2.<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

slot

<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

Props：

????name - string，用于命名插槽。

组合

parent

【Vue Instance】指定已创建的实例之父实例，在两者之间建立父子关系。

子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

注意：

????????节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。

mixins

【Array<Object>】mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

示例代码：

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

extends

【Object | Function】允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

示例代码：

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

provide/inject

类型：

????provide：Object | () => Object

????inject：Array<string> | { [key: string]: string | Symbol | Object }

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数，该对象包含可注入其子孙的 property。

inject 选项应该是一个字符串数组或一个对象【对象的 key 是本地的绑定名】。

注意：

????????provide 和 inject 绑定并不是可响应的。但如果传入了一个可监听的对象，那么其对象的 property 还是可响应的。

其它

name

【string】允许组件模板递归地调用自身。只有作为组件选项时起作用。

指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

注意：

????????组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

delimiters

【Array<string>】改变纯文本插入分隔符。

默认值：["{{", "}}"]

示例代码：

new Vue({
  delimiters: ['${', '}']
})
// 分隔符变成了 ES6 模板字符串的风格

注意：

????????这个选项只在完整构建版本中的浏览器内编译时可用。

functional

【boolean】使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。用一个简单的 render 函数返回虚拟节点使渲染的代价更小。

model

【{ prop?: string, event?: string }】允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是使用一些输入类型【例如单选框和复选框按钮】可能会通过 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

inheritAttrs

【boolean】默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。通过实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

默认值：true

注意：

????????这个选项不影响 class 和 style 绑定。

comments

【boolean】当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

注意：

????????这个选项只在完整构建版本中的浏览器内编译时可用。