API

全局配置

Vue.config 是一个包含 Vue 全局配置的对象。您可以在启动应用程序之前修改其下面列出的属性。

silent

类型： boolean
默认值： false
用法
Vue.config.silent = true
抑制所有 Vue 日志和警告。

optionMergeStrategies

类型： { [key: string]: Function }
默认值： {}
用法
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option: 1 }) // Profile.options._my_option = 2
定义选项的自定义合并策略。

合并策略接收分别在父实例和子实例上定义的该选项的值作为第一个和第二个参数。上下文 Vue 实例作为第三个参数传递。
另请参阅： 自定义选项合并策略

devtools

类型： boolean
默认值： true (生产版本中为 false)
用法
// make sure to set this synchronously immediately after loading Vue Vue.config.devtools = true
配置是否允许 vue-devtools 检查。此选项的默认值在开发版本中为 true，在生产版本中为 false。您可以将其设置为 true 以启用生产版本的检查。

errorHandler

类型： Function
默认值： undefined
用法
Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` is a Vue-specific error info, e.g. which lifecycle hook // the error was found in. Only available in 2.2.0+ }
为组件渲染函数和观察者期间未捕获的错误分配一个处理程序。处理程序将使用错误和 Vue 实例进行调用。

在 2.2.0+ 中，此钩子还会捕获组件生命周期钩子中的错误。此外，当此钩子为 undefined 时，捕获的错误将使用 console.error 记录，而不是使应用程序崩溃。

在 2.4.0+ 中，此钩子还会捕获在组件生命周期钩子中抛出的错误。

在 2.6.0+ 中，此钩子还会捕获在 v-on DOM 监听器中抛出的错误。此外，如果任何覆盖的钩子或处理程序返回一个 Promise 链（例如异步函数），来自该 Promise 链的错误也将被处理。

错误跟踪服务 Sentry 和 Bugsnag 使用此选项提供官方集成。

warnHandler

2.4.0+ 中的新增功能

类型： Function
默认值： undefined
用法
Vue.config.warnHandler = function (msg, vm, trace) { // `trace` is the component hierarchy trace }
为运行时 Vue 警告分配一个自定义处理程序。请注意，这仅在开发期间有效，并在生产中被忽略。

ignoredElements

类型： Array<string | RegExp>
默认值： []
用法
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component', // Use a `RegExp` to ignore all elements that start with "ion-" // 2.5+ only /^ion-/ ]
使 Vue 忽略在 Vue 之外定义的自定义元素（例如，使用 Web Components API）。否则，它将抛出一个关于 Unknown custom element 的警告，假设您忘记注册全局组件或拼写错误组件名称。

keyCodes

类型： { [key: string]: number | Array<number> }
默认值： {}

用法

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase won`t work
  mediaPlayPause: 179,
  // instead you can use kebab-case with double quotation marks
  "media-play-pause": 179,
  up: [38, 87]
}

<input type="text" @keyup.media-play-pause="method">

为 v-on 定义自定义键别名。

performance

2.2.0+ 中的新增功能

类型： boolean
默认值： false (从 2.2.3+ 开始)
用法:

将其设置为 true 以在浏览器开发者工具性能/时间线面板中启用组件初始化、编译、渲染和修补性能跟踪。仅在开发模式下以及支持 performance.mark API 的浏览器中有效。

productionTip

2.2.0+ 中的新增功能

类型： boolean
默认值： true
用法:

将其设置为 false 以防止 Vue 启动时的生产提示。

全局 API

Vue.extend( options )

参数
- {Object} options

用法

创建基本 Vue 构造函数的“子类”。参数应该是一个包含组件选项的对象。

这里需要注意的特殊情况是 data 选项 - 它在与 Vue.extend() 一起使用时必须是一个函数。

<div id="mount-point"></div>

// create constructor
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')

将导致

<p>Walter White aka Heisenberg</p>

另请参阅： 组件

Vue.nextTick( [callback, context] )

参数
- {Function} [callback]
- {Object} [context]
用法

将回调延迟到下一个 DOM 更新周期后执行。在更改某些数据后立即使用它以等待 DOM 更新。
// modify data vm.msg = 'Hello' // DOM not updated yet Vue.nextTick(function () { // DOM updated }) // usage as a promise (2.1.0+, see note below) Vue.nextTick() .then(function () { // DOM updated })
2.1.0+ 中的新增功能：如果未提供回调并且执行环境支持 Promise，则返回一个 Promise。请注意，Vue 不附带 Promise polyfill，因此如果您针对不支持原生 Promise 的浏览器（看看您，IE），您将必须自己提供 polyfill。
另请参阅： 异步更新队列

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

参数
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值： 设置的值。
用法

向响应式对象添加一个属性，确保新属性也是响应式的，从而触发视图更新。这必须用于向响应式对象添加新属性，因为 Vue 无法检测到正常的属性添加（例如 this.myObject.newProperty = 'hi'）。

目标对象不能是 Vue 实例，也不能是 Vue 实例的根数据对象。
另请参阅： 深入了解响应式

Vue.delete( target, propertyName/index )

参数
- {Object | Array} target
- {string | number} propertyName/index
仅在 2.2.0+ 中：也适用于 Array + index。
用法

删除对象上的属性。如果对象是响应式的，请确保删除触发视图更新。这主要用于解决 Vue 无法检测到属性删除的限制，但您很少需要使用它。

目标对象不能是 Vue 实例，也不能是 Vue 实例的根数据对象。
另请参阅： 深入了解响应式

Vue.directive( id, [definition] )

参数
- {string} id
- {Function | Object} [definition]

用法

注册或检索全局指令。

// register
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// register (function directive)
Vue.directive('my-directive', function () {
  // this will be called as `bind` and `update`
})

// getter, return the directive definition if registered
var myDirective = Vue.directive('my-directive')

另请参阅： 自定义指令

Vue.filter( id, [definition] )

参数
- {string} id
- {Function} [definition]

用法

注册或检索全局过滤器。

// register
Vue.filter('my-filter', function (value) {
  // return processed value
})

// getter, return the filter if registered
var myFilter = Vue.filter('my-filter')

另请参阅： 过滤器

Vue.component( id, [definition] )

参数
- {string} id
- {Function | Object} [definition]

用法

注册或检索全局组件。注册还会自动使用给定的 id 设置组件的 name。

// register an extended constructor
Vue.component('my-component', Vue.extend({ /* ... */ }))

// register an options object (automatically call Vue.extend)
Vue.component('my-component', { /* ... */ })

// retrieve a registered component (always return constructor)
var MyComponent = Vue.component('my-component')

另请参阅： 组件

Vue.use( plugin )

参数
- {Object | Function} plugin
用法

安装 Vue.js 插件。如果插件是一个对象，它必须公开一个 install 方法。如果它本身是一个函数，它将被视为安装方法。安装方法将使用 Vue 作为参数进行调用。

此方法必须在调用 new Vue() 之前调用。

当此方法在同一个插件上多次调用时，插件将只安装一次。
另请参阅： 插件

Vue.mixin( mixin )

参数
- {Object} mixin
用法

全局应用一个混入，它会影响之后创建的每个 Vue 实例。插件作者可以使用它将自定义行为注入组件。不建议在应用程序代码中使用。
另请参阅： 全局混入

Vue.compile( template )

参数
- {string} template

用法

将模板字符串编译成渲染函数。仅在完整版本中可用。

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

另请参阅： 渲染函数

Vue.observable( object )

2.6.0+ 中的新增功能

参数
- {Object} object
用法

使对象响应式。在内部，Vue 在 data 函数返回的对象上使用它。

返回的对象可以直接在渲染函数和计算属性中使用，并且在发生变异时会触发适当的更新。它也可以用作简单场景的最小跨组件状态存储。
const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.count}`) } }
在 Vue 2.x 中，Vue.observable 直接修改传递给它的对象，因此它等效于返回的对象，如此处所示。在 Vue 3.x 中，将返回一个响应式代理，如果直接修改原始对象，则会使其保持非响应式。因此，为了与未来的兼容性，我们建议始终使用 Vue.observable 返回的对象，而不是最初传递给它的对象。
另请参阅： 深入了解响应式

Vue.version

详细信息： 提供已安装的 Vue 版本作为字符串。这对于社区插件和组件特别有用，您可能对不同版本使用不同的策略。

用法:

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

选项/数据

data

类型： Object | Function
限制： 仅在组件定义中使用时接受 Function。
详细信息

Vue 实例的数据对象。Vue 将递归地将其属性转换为 getter/setter 以使其“响应式”。对象必须是纯对象：浏览器 API 对象和原型属性等原生对象将被忽略。一个经验法则是数据应该只是数据 - 不建议观察具有自身状态行为的对象。

一旦被观察，您就无法再向根数据对象添加响应式属性。因此，建议在创建实例之前预先声明所有根级响应式属性。

创建实例后，原始数据对象可以作为 vm.$data 访问。Vue 实例还代理了在数据对象上找到的所有属性，因此 vm.a 将等效于 vm.$data.a。

以 _ 或 $ 开头的属性不会在 Vue 实例上代理，因为它们可能会与 Vue 的内部属性和 API 方法冲突。您必须以 vm.$data._property 的方式访问它们。

在定义组件时，data 必须声明为返回初始数据对象的函数，因为将使用相同的定义创建许多实例。如果我们对 data 使用一个普通对象，那么同一个对象将被按引用共享到创建的所有实例中！通过提供一个 data 函数，每次创建一个新实例时，我们都可以调用它以返回初始数据的全新副本。

如果需要，可以通过将vm.$data传递给JSON.parse(JSON.stringify(...))来获得原始对象的深层克隆。

示例

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

请注意，如果您使用带data属性的箭头函数，this将不会是组件的实例，但您仍然可以将实例作为函数的第一个参数访问。

data: vm => ({ a: vm.myProp })

另请参阅： 深入了解响应式

props

类型： Array<string> | Object
详细信息

暴露给父组件以接收数据的属性列表/哈希。它具有基于数组的简单语法和基于对象的替代语法，允许进行高级配置，例如类型检查、自定义验证和默认值。

使用基于对象的语法，您可以使用以下选项
- type：可以是以下本机构造函数之一：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数或这些构造函数的数组。将检查道具是否具有给定的类型，如果它没有，则会抛出警告。有关道具类型的更多信息。
- default： any
  指定道具的默认值。如果未传递道具，则将使用此值。对象或数组默认值必须从工厂函数返回。
- required： Boolean
  定义道具是否必需。在非生产环境中，如果此值为真并且未传递道具，则会抛出控制台警告。
- validator： Function
  自定义验证函数，它将道具值作为唯一参数。在非生产环境中，如果此函数返回假值（即验证失败），则会抛出控制台警告。您可以阅读有关道具验证的更多信息这里。

示例

// simple syntax
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// object syntax with validation
Vue.component('props-demo-advanced', {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

另请参阅： Props

propsData

类型： { [key: string]: any }
限制： 仅在通过new创建实例时受尊重。
详细信息

在创建实例期间将道具传递给实例。这主要用于使单元测试更容易。

示例

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

computed

类型： { [key: string]: Function | { get: Function, set: Function } }
详细信息

要混合到 Vue 实例中的计算属性。所有 getter 和 setter 的this上下文都会自动绑定到 Vue 实例。

请注意，如果您使用带计算属性的箭头函数，this将不会是组件的实例，但您仍然可以将实例作为函数的第一个参数访问。
computed: { aDouble: vm => vm.a * 2 }
计算属性被缓存，并且仅在响应式依赖项更改时重新计算。请注意，如果某个依赖项超出实例的范围（即非响应式），则计算属性将不会更新。

示例

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // get only
    aDouble: function () {
      return this.a * 2
    },
    // both get and set
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

另请参阅： 计算属性

methods

类型： { [key: string]: Function }
详细信息

要混合到 Vue 实例中的方法。您可以直接在 VM 实例上访问这些方法，或在指令表达式中使用它们。所有方法的this上下文都会自动绑定到 Vue 实例。

请注意，您不应该使用箭头函数来定义方法（例如plus: () => this.a++）。原因是箭头函数绑定父上下文，因此this不会像您预期的那样是 Vue 实例，并且this.a将是未定义的。

示例

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

另请参阅： 事件处理

watch

类型： { [key: string]: string | Function | Object | Array}
详细信息

一个对象，其中键是要观察的表达式，值是相应的回调。该值也可以是方法名称的字符串，或包含附加选项的对象。Vue 实例将在实例化时为对象中的每个条目调用$watch()。

示例

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)
    },
    // string method name
    b: 'someMethod',
    // the callback will be called whenever any of the watched object properties change regardless of their nested depth
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // the callback will be called immediately after the start of the observation
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // you can pass array of callbacks, they will be called one-by-one
    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

请注意，您不应该使用箭头函数来定义观察者（例如searchQuery: newValue => this.updateAutocomplete(newValue)）。原因是箭头函数绑定父上下文，因此this不会像您预期的那样是 Vue 实例，并且this.updateAutocomplete将是未定义的。

另请参阅： 实例方法/数据 - vm.$watch

选项/DOM

el

类型： string | Element
限制： 仅在通过new创建实例时受尊重。
详细信息

为 Vue 实例提供一个现有的 DOM 元素来挂载。它可以是 CSS 选择器字符串或实际的 HTMLElement。

实例挂载后，解析后的元素将可作为vm.$el访问。

如果此选项在实例化时可用，则实例将立即进入编译；否则，用户必须显式调用vm.$mount()来手动启动编译。

提供的元素仅用作挂载点。与 Vue 1.x 不同，挂载的元素在所有情况下都将被 Vue 生成的 DOM 替换。因此，不建议将根实例挂载到<html>或<body>。

如果render函数或template选项都不存在，则挂载 DOM 元素的 DOM 内 HTML 将被提取为模板。在这种情况下，应使用 Vue 的运行时 + 编译器版本。
另请参阅
- 生命周期图
- 运行时 + 编译器与仅运行时

template

类型： string
详细信息

用作 Vue 实例标记的字符串模板。该模板将替换挂载的元素。挂载元素内的任何现有标记都将被忽略，除非模板中存在内容分发插槽。

如果字符串以#开头，它将用作 querySelector 并使用所选元素的 innerHTML 作为模板字符串。这允许使用常见的<script type="x-template">技巧来包含模板。

从安全角度来看，您应该只使用可以信任的 Vue 模板。永远不要使用用户生成的内容作为您的模板。

如果 Vue 选项中存在 render 函数，则将忽略模板。
另请参阅
- 生命周期图
- 内容分发与插槽

render

类型： (createElement: () => VNode) => VNode
详细信息

字符串模板的替代方案，允许您利用 JavaScript 的全部编程能力。render 函数接收createElement方法作为其第一个参数，用于创建VNode。

如果组件是函数组件，render 函数还会接收一个额外的参数context，它提供对上下文数据的访问，因为函数组件是无实例的。

render函数优先于从template选项编译的 render 函数或由el选项指定的挂载元素的 DOM 内 HTML 模板。
另请参阅： 渲染函数

renderError

2.2.0+ 中的新增功能

类型： (createElement: () => VNode, error: Error) => VNode
详细信息

仅在开发模式下有效。

当默认render函数遇到错误时，提供替代的渲染输出。错误将作为第二个参数传递给renderError。这在与热重载一起使用时特别有用。

示例

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

另请参阅： 渲染函数

选项/生命周期钩子

所有生命周期钩子都会自动将其this上下文绑定到实例，以便您可以访问数据、计算属性和方法。这意味着您不应该使用箭头函数来定义生命周期方法（例如created: () => this.fetchTodos()）。原因是箭头函数绑定父上下文，因此this不会像您预期的那样是 Vue 实例，并且this.fetchTodos将是未定义的。

beforeCreate

类型： Function
详细信息

在实例初始化后立即同步调用，在数据观察和事件/观察者设置之前。
另请参阅： 生命周期图

created

类型： Function
详细信息

在实例创建后同步调用。在此阶段，实例已完成处理选项，这意味着以下内容已设置：数据观察、计算属性、方法、观察/事件回调。但是，挂载阶段尚未开始，并且$el属性尚不可用。
另请参阅： 生命周期图

beforeMount

类型： Function
详细信息

在挂载开始之前调用：render函数即将首次调用。

此钩子在服务器端渲染期间不会被调用。
另请参阅： 生命周期图

mounted

类型： Function
详细信息

在实例挂载后调用，其中el被新创建的vm.$el替换。如果根实例挂载到文档内元素，则vm.$el在调用mounted时也将位于文档内。

请注意，mounted 不保证所有子组件也已挂载。如果您想等到整个视图渲染完毕，可以在 mounted 内部使用 vm.$nextTick
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
此钩子在服务器端渲染期间不会被调用。
另请参阅： 生命周期图

beforeUpdate

类型： Function
详细信息

当数据发生变化，在 DOM 被修补之前调用。这是一个在更新之前访问现有 DOM 的好地方，例如，删除手动添加的事件监听器。

此钩子在服务器端渲染期间不会被调用，因为只有初始渲染是在服务器端执行的。
另请参阅： 生命周期图

updated

类型： Function
详细信息

当数据更改导致虚拟 DOM 重新渲染和修补后调用。

当此钩子被调用时，组件的 DOM 将被更新，因此您可以在此处执行依赖于 DOM 的操作。但是，在大多数情况下，您应该避免在钩子内部更改状态。要对状态更改做出反应，通常最好使用计算属性或观察者。

请注意，updated 不保证所有子组件也已重新渲染。如果您想等到整个视图重新渲染完毕，可以在 updated 内部使用 vm.$nextTick
updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }
此钩子在服务器端渲染期间不会被调用。
另请参阅： 生命周期图

activated

类型： Function
详细信息

当一个被 keep-alive 组件激活时调用。

此钩子在服务器端渲染期间不会被调用。
另请参阅
- 内置组件 - keep-alive
- 动态组件 - keep-alive

deactivated

类型： Function
详细信息

当一个被 keep-alive 组件停用时调用。

此钩子在服务器端渲染期间不会被调用。
另请参阅
- 内置组件 - keep-alive
- 动态组件 - keep-alive

beforeDestroy

类型： Function
详细信息

在 Vue 实例被销毁之前调用。在此阶段，实例仍然是完全可用的。

此钩子在服务器端渲染期间不会被调用。
另请参阅： 生命周期图

destroyed

类型： Function
详细信息

在 Vue 实例被销毁后调用。当此钩子被调用时，Vue 实例的所有指令都已解除绑定，所有事件监听器都已删除，所有子 Vue 实例也已销毁。

此钩子在服务器端渲染期间不会被调用。
另请参阅： 生命周期图

errorCaptured

2.5.0+ 中新增

类型： (err: Error, vm: Component, info: string) => ?boolean
详细信息

当捕获到来自任何后代组件的错误时调用。该钩子接收三个参数：错误、触发错误的组件实例以及一个包含错误捕获位置信息的字符串。该钩子可以返回 false 以阻止错误进一步传播。

您可以在此钩子中修改组件状态。但是，在您的模板或渲染函数中使用条件语句，在捕获到错误时短路其他内容非常重要；否则，组件将陷入无限渲染循环。

错误传播规则
- 默认情况下，所有错误仍然会发送到全局 config.errorHandler（如果已定义），以便这些错误仍然可以在一个地方报告给分析服务。
- 如果组件的继承链或父链上存在多个 errorCaptured 钩子，则所有钩子都将在同一个错误上被调用。
- 如果 errorCaptured 钩子本身抛出错误，则此错误和原始捕获错误都将发送到全局 config.errorHandler。
- errorCaptured 钩子可以返回 false 以阻止错误进一步传播。这实际上是在说“此错误已处理，应该忽略”。它将阻止任何额外的 errorCaptured 钩子或全局 config.errorHandler 为此错误调用。

选项 / 资源

指令

类型： Object
详细信息

要提供给 Vue 实例的指令的哈希表。
另请参阅： 自定义指令

过滤器

类型： Object
详细信息

要提供给 Vue 实例的过滤器的哈希表。
另请参阅： Vue.filter

组件

类型： Object
详细信息

要提供给 Vue 实例的组件的哈希表。
另请参阅： 组件

选项 / 组成

父级

类型： Vue 实例
详细信息

为要创建的实例指定父实例。在两者之间建立父子关系。父级将作为子级的 this.$parent 可访问，子级将被推入父级的 $children 数组中。

谨慎使用 $parent 和 $children - 它们主要用作逃生舱。优先使用 props 和事件进行父子通信。

混入

类型： Array<Object>
详细信息

mixins 选项接受一个混入对象数组。这些混入对象可以包含实例选项，就像普通的实例对象一样，它们将使用 Vue.extend() 中相同的选项合并逻辑与最终的选项合并。例如，如果您的混入包含一个 created 钩子，而组件本身也包含一个 created 钩子，则这两个函数都将被调用。

混入钩子的调用顺序与它们提供的顺序相同，并且在组件自己的钩子之前调用。

示例

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

另请参阅： 混入

扩展

类型： Object | Function
详细信息

允许声明性地扩展另一个组件（可以是纯选项对象或构造函数），而无需使用 Vue.extend。这主要用于简化单文件组件之间的扩展。

这类似于 mixins。

示例

var CompA = { ... }

// extend CompA without having to call `Vue.extend` on either
var CompB = {
  extends: CompA,
  ...
}

提供 / 注入

2.2.0+ 中的新增功能

类型
- 提供： Object | () => Object
- 注入： Array<string> | { [key: string]: string | Symbol | Object }
详细信息

这对选项一起使用，允许祖先组件充当其所有后代的依赖项注入器，无论组件层次结构有多深，只要它们在同一个父链中。如果您熟悉 React，这与 React 的上下文功能非常相似。

provide 选项应该是一个对象或一个返回对象的函数。此对象包含可用于注入其后代的属性。您可以在此对象中使用 ES2015 符号作为键，但仅在原生支持 Symbol 和 Reflect.ownKeys 的环境中使用。

inject 选项应该是一个
- 字符串数组，或
- 一个对象，其中键是本地绑定名称，值是
  - 要在可用注入中搜索的键（字符串或符号），或
  - 一个对象，其中
    - from 属性是可在可用注入中搜索的键（字符串或符号），并且
    - default 属性用作回退值
注意：provide 和 inject 绑定不是响应式的。这是故意的。但是，如果您传递一个观察对象，则该对象上的属性仍然是响应式的。

示例

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

使用 ES2015 符号，函数 provide 和对象 inject

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

接下来的 2 个示例适用于 Vue 2.2.1+。低于该版本的版本，注入的值在 props 和 data 初始化之后解析。

使用注入的值作为 prop 的默认值

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

使用注入的值作为数据条目

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

在 2.5.0+ 中，注入可以是可选的，并具有默认值

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

如果需要从具有不同名称的属性中注入，请使用 from 来表示源属性

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

与 prop 默认值类似，您需要为非原始值使用工厂函数

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

选项 / 杂项

名称

类型： string
限制：仅在用作组件选项时才受尊重。
详细信息

允许组件在其模板中递归调用自身。请注意，当组件使用 Vue.component() 在全局范围内注册时，全局 ID 会自动设置为其名称。

指定 name 选项的另一个好处是调试。命名组件会导致更实用的警告消息。此外，当在 vue-devtools 中检查应用程序时，未命名的组件将显示为 <AnonymousComponent>，这不太信息丰富。通过提供 name 选项，您将获得更具信息量的组件树。

分隔符

类型： Array<string>
默认值： ["{{", "}}"]
限制：此选项仅在完整构建中可用，并带有浏览器内编译。
详细信息

更改纯文本插值分隔符。

示例

new Vue({
  delimiters: ['${', '}']
})

// Delimiters changed to ES6 template string style

函数式

类型： boolean
详细信息

导致组件无状态（无 data）且无实例（无 this 上下文）。它们只是一个返回虚拟节点的 render 函数，使其渲染成本更低。
另请参阅： 函数式组件

模型

2.2.0 中新增

类型： { prop?: string, event?: string }
详细信息

允许自定义组件自定义在使用 v-model 时使用的 prop 和事件。默认情况下，组件上的 v-model 使用 value 作为 prop，使用 input 作为事件，但某些输入类型（如复选框和单选按钮）可能希望将 value prop 用于其他目的。在这种情况下，使用 model 选项可以避免冲突。

示例

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

以上将等效于

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

继承属性

2.4.0+ 中的新增功能

类型： boolean
默认值： true
详细信息

默认情况下，父作用域属性绑定如果未被识别为 props，则会“透传”并作为普通 HTML 属性应用于子组件的根元素。当编写包装目标元素或其他组件的组件时，这可能并不总是期望的行为。通过将 inheritAttrs 设置为 false，可以禁用此默认行为。这些属性可以通过 $attrs 实例属性（也是 2.4 中的新增内容）获得，并可以使用 v-bind 显式绑定到非根元素。

注意：此选项**不**影响 class 和 style 绑定。

comments

2.4.0+ 中的新增功能

类型： boolean
默认值： false
限制：此选项仅在完整构建中可用，并带有浏览器内编译。
详细信息

当设置为 true 时，将保留并渲染模板中找到的 HTML 注释。默认行为是丢弃它们。

实例属性

vm.$data

类型： Object
详细信息

Vue 实例正在观察的数据对象。Vue 实例代理对数据对象上属性的访问。
另请参见： 选项 / 数据 - 数据

vm.$props

2.2.0+ 中的新增功能

类型： Object
详细信息

表示组件当前接收到的 props 的对象。Vue 实例代理对 props 对象上属性的访问。

vm.$el

类型： Element
只读
详细信息

Vue 实例正在管理的根 DOM 元素。

vm.$options

类型： Object
只读

详细信息

用于当前 Vue 实例的实例化选项。当您想在选项中包含自定义属性时，这很有用。

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

vm.$parent

类型： Vue 实例
只读
详细信息

父实例，如果当前实例有父实例。

vm.$root

类型： Vue 实例
只读
详细信息

当前组件树的根 Vue 实例。如果当前实例没有父实例，则此值将是自身。

vm.$children

类型： Array<Vue instance>
只读
详细信息

当前实例的直接子组件。注意，$children 没有顺序保证，并且它不是响应式的。如果您发现自己试图使用 $children 进行数据绑定，请考虑使用数组和 v-for 生成子组件，并使用数组作为事实来源。

vm.$slots

类型： { [name: string]: ?Array<VNode> }
只读
响应式？ 否
详细信息

用于以编程方式访问由插槽分发的内容插槽。每个具名插槽都有其对应的属性（例如，v-slot:foo 的内容将在 vm.$slots.foo 中找到）。default 属性包含未包含在具名插槽中的节点或 v-slot:default 的内容。

请注意，插槽**不是**响应式的。如果您需要一个组件根据传递给插槽的数据进行重新渲染，我们建议考虑依赖于响应式实例选项（如 props 或 data）的不同策略。

注意： v-slot:foo 在 v2.6+ 中受支持。对于旧版本，您可以使用已弃用的语法。

访问 vm.$slots 在编写具有渲染函数的组件时最有用。

示例

<blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

另请参阅

vm.$scopedSlots

2.1.0+ 中的新增内容

类型： { [name: string]: props => Array<VNode> | undefined }
只读
详细信息

用于以编程方式访问作用域插槽。对于每个插槽，包括 default 插槽，该对象包含一个对应的函数，该函数返回 VNodes。

访问 vm.$scopedSlots 在编写具有渲染函数的组件时最有用。

注意： 从 2.6.0+ 开始，此属性有两个显著变化
1. 作用域插槽函数现在保证返回一个 VNodes 数组，除非返回值无效，在这种情况下，函数将返回 undefined。
2. 所有 $slots 现在也作为函数公开在 $scopedSlots 上。如果您使用渲染函数，现在建议始终通过 $scopedSlots 访问插槽，无论它们当前是否使用作用域。这不仅会使将来添加作用域的重构更简单，而且还会简化您最终迁移到 Vue 3 的过程，在 Vue 3 中，所有插槽都将是函数。
另请参阅

vm.$refs

类型： Object
只读
详细信息

使用 ref 属性注册的 DOM 元素和组件实例的对象。
另请参阅
- 子组件引用
- 特殊属性 - ref

vm.$isServer

类型： boolean
只读
详细信息

当前 Vue 实例是否在服务器上运行。
另请参见： 服务器端渲染

vm.$attrs

2.4.0+ 中的新增功能

类型： { [key: string]: string }
只读
详细信息

包含未被识别（并提取）为 props 的父作用域属性绑定（除了 class 和 style）。当组件没有声明任何 props 时，这实际上包含所有父作用域绑定（除了 class 和 style），并且可以通过 v-bind="$attrs" 传递给内部组件 - 在创建高阶组件时很有用。

vm.$listeners

2.4.0+ 中的新增功能

类型： { [key: string]: Function | Array<Function> }
只读
详细信息

包含父作用域 v-on 事件监听器（没有 .native 修饰符）。这可以通过 v-on="$listeners" 传递给内部组件 - 在创建透明包装组件时很有用。

实例方法 / 数据

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

参数
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep
  - {boolean} immediate
返回： {Function} unwatch
用法

观察 Vue 实例上的表达式或计算属性的变化。回调函数将使用新值和旧值进行调用。表达式只接受点分隔路径。对于更复杂的表达式，请改用函数。

注意：当修改（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用同一个对象/数组。Vue 不会保留修改前值的副本。

示例

// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
  // do something
})

// function
vm.$watch(
  function () {
    // every time the expression `this.a + this.b` yields a different result,
    // the handler will be called. It's as if we were watching a computed
    // property without defining the computed property itself
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // do something
  }
)

vm.$watch 返回一个 unwatch 函数，该函数停止触发回调函数

var unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

选项：deep

要检测对象内部的嵌套值变化，您需要在 options 参数中传入 deep: true。请注意，您不需要这样做来监听数组修改。
vm.$watch('someObject', callback, { deep: true }) vm.someObject.nestedValue = 123 // callback is fired

选项：immediate

在选项中传入 immediate: true 将立即使用表达式的当前值触发回调函数

vm.$watch('a', callback, {
  immediate: true
})
// `callback` is fired immediately with current value of `a`

请注意，使用 immediate 选项，您将无法在第一次回调调用时取消观察给定属性。

// This will cause an error
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

如果您仍然想在回调函数内部调用 unwatch 函数，您应该先检查它的可用性

var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

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

参数
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值： 设置的值。
用法

这是全局 Vue.set 的别名。
另请参见： Vue.set

vm.$delete( target, propertyName/index )

参数
- {Object | Array} target
- {string | number} propertyName/index
用法

这是全局 Vue.delete 的别名。
另请参见： Vue.delete

实例方法 / 事件

vm.$on( event, callback )

参数
- {string | Array<string>} event（数组仅在 2.2.0+ 中受支持）
- {Function} callback
用法

监听当前 vm 上的自定义事件。事件可以通过 vm.$emit 触发。回调函数将接收传递给这些事件触发方法的所有附加参数。

示例

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

vm.$once( event, callback )

参数
- {string} event
- {Function} callback
用法

监听自定义事件，但只监听一次。监听器将在第一次触发后被移除。

vm.$off( [event, callback] )

参数
- {string | Array<string>} event（数组仅在 2.2.2+ 中受支持）
- {Function} [callback]
用法

移除自定义事件监听器。
- 如果没有提供参数，则移除所有事件监听器；
- 如果只提供事件，则移除该事件的所有监听器；
- 如果同时提供事件和回调函数，则只移除该特定回调函数的监听器。

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

参数
- {string} eventName
- [...args]
在当前实例上触发事件。任何附加参数都将传递给监听器的回调函数。

示例

仅使用事件名称使用 $emit

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})

使用附加参数使用 $emit

Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
})

<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

实例方法 / 生命周期

vm.$mount( [elementOrSelector] )

参数
- {Element | string} [elementOrSelector]
- {boolean} [hydrating]
返回： vm - 实例本身
用法

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

如果未提供 elementOrSelector 参数，则模板将作为文档外元素渲染，您必须使用原生 DOM API 将其插入文档中。

该方法返回实例本身，以便您可以在其后链接其他实例方法。

示例

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// create and mount to #app (will replace #app)
new MyComponent().$mount('#app')

// the above is the same as:
new MyComponent({ el: '#app' })

// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

另请参阅
- 生命周期图
- 服务器端渲染

vm.$forceUpdate()

用法

强制 Vue 实例重新渲染。请注意，它不会影响所有子组件，只会影响实例本身和具有插入插槽内容的子组件。

vm.$nextTick( [callback] )

参数
- {Function} [callback]
用法

将回调函数延迟到下一个 DOM 更新周期后执行。在更改某些数据后立即使用它，以等待 DOM 更新。这与全局 Vue.nextTick 相同，只是回调函数的 this 上下文会自动绑定到调用此方法的实例。

2.1.0+ 中的新增功能：如果未提供回调并且执行环境支持 Promise，则返回一个 Promise。请注意，Vue 不附带 Promise polyfill，因此如果您针对不支持原生 Promise 的浏览器（看看您，IE），您将必须自己提供 polyfill。

示例

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

另请参阅
- Vue.nextTick
- 异步更新队列

vm.$destroy()

用法

完全销毁一个虚拟机。清理它与其他现有虚拟机的连接，解除所有指令绑定，关闭所有事件监听器。

触发 beforeDestroy 和 destroyed 钩子。

在正常使用情况下，你不应该自己调用此方法。建议使用 v-if 和 v-for 以数据驱动的方式控制子组件的生命周期。
另请参阅： 生命周期图

指令

v-text

预期： string
详细信息

更新元素的 textContent。如果你需要更新 textContent 的一部分，你应该使用 {{ Mustache }} 插值。

示例

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

另请参阅： 数据绑定语法 - 插值

v-html

预期： string
详细信息

更新元素的 innerHTML。注意，内容将作为纯 HTML 插入 - 它们不会被编译为 Vue 模板。如果你发现自己试图使用 v-html 编写模板，请尝试使用组件来重新思考解决方案。

在你的网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致跨站脚本攻击。只对可信内容使用 v-html，并且永远不要对用户提供的内容使用它。

在单文件组件中，scoped 样式不会应用于 v-html 内部的内容，因为该 HTML 没有被 Vue 的模板编译器处理。如果你想用 scoped CSS 针对 v-html 内容，你可以使用 CSS 模块或一个额外的全局 <style> 元素，并使用手动范围策略，例如 BEM。
示例
<div v-html="html"></div>
另请参阅： 数据绑定语法 - 插值

v-show

预期： any
用法

根据表达式的真值切换元素的 display CSS 属性。

当它的条件改变时，这个指令会触发过渡。
另请参阅： 条件渲染 - v-show

v-if

预期： any
用法

根据表达式的真值有条件地渲染元素。元素及其包含的指令/组件在切换时会被销毁和重建。如果元素是一个 <template> 元素，它的内容将被提取为条件块。

当它的条件改变时，这个指令会触发过渡。

当与 v-if 一起使用时，v-for 的优先级高于 v-if。有关详细信息，请参阅列表渲染指南。
另请参阅： 条件渲染 - v-if

v-else

不期望表达式
限制： 之前的兄弟元素必须有 v-if 或 v-else-if。

用法

表示 v-if 或 v-if/v-else-if 链的“else 块”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

另请参阅： 条件渲染 - v-else

v-else-if

2.1.0+ 中的新增内容

预期： any
限制： 之前的兄弟元素必须有 v-if 或 v-else-if。

用法

表示 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-else-if

v-for

预期： Array | Object | number | string | Iterable (since 2.6)
用法

根据源数据多次渲染元素或模板块。指令的值必须使用特殊语法 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 的默认行为将尝试就地修补元素，而不会移动它们。要强制它重新排序元素，你需要使用 key 特殊属性提供一个排序提示
<div v-for="item in items" :key="item.id"> {{ item.text }} </div>
在 2.6+ 中，v-for 也可以在实现可迭代协议的值上工作，包括本地的 Map 和 Set。但是，需要注意的是，Vue 2.x 目前不支持 Map 和 Set 值的响应性，因此无法自动检测更改。

当与 v-if 一起使用时，v-for 的优先级高于 v-if。有关详细信息，请参阅列表渲染指南。

v-for 的详细用法在下面链接的指南部分中解释。
另请参阅
- 列表渲染
- key

v-on

简写： @
预期： Function | Inline Statement | Object
参数： event
修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 在捕获模式下添加事件监听器。
- .self - 只有当事件从该元素发出时才触发处理程序。
- .{keyCode | keyAlias} - 仅在特定键上触发处理程序。
- .native - 监听组件根元素上的原生事件。
- .once - 最多触发一次处理程序。
- .left - (2.2.0+) 仅对左键鼠标事件触发处理程序。
- .right - (2.2.0+) 仅对右键鼠标事件触发处理程序。
- .middle - (2.2.0+) 仅对中键鼠标事件触发处理程序。
- .passive - (2.3.0+) 使用 { passive: true } 附加 DOM 事件。
用法

将事件监听器附加到元素。事件类型由参数表示。表达式可以是方法名、内联语句，或者如果存在修饰符则可以省略。

当在普通元素上使用时，它只监听 原生 DOM 事件。当在自定义元素组件上使用时，它会监听该子组件上发出的自定义事件。

当监听原生 DOM 事件时，该方法接收原生事件作为唯一参数。如果使用内联语句，该语句可以访问特殊的 $event 属性：v-on:click="handle('ok', $event)"。

从 2.4.0+ 开始，v-on 还支持绑定到事件/监听器对的对象，而无需参数。注意，当使用对象语法时，它不支持任何修饰符。

示例

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">

<!-- key modifier using keyCode -->
<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

监听子组件上的自定义事件（当子组件上发出“my-event”时，会调用处理程序）

<my-component @my-event="handleThis"></my-component>

<!-- inline statement -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- native event on component -->
<my-component @click.native="onClick"></my-component>

另请参阅
- 事件处理
- 组件 - 自定义事件

v-bind

简写： :
预期： any (with argument) | Object (without argument)
参数： attrOrProp (optional)
修饰符
- .prop - 绑定为 DOM 属性而不是属性 (有什么区别？)。如果标签是一个组件，那么 .prop 将在组件的 $el 上设置属性。
- .camel - (2.1.0+) 将连字符分隔的属性名转换为驼峰式。
- .sync - (2.3.0+) 一种语法糖，扩展为用于更新绑定值的 v-on 处理程序。
用法

动态绑定一个或多个属性，或将组件 prop 绑定到表达式。

当用于绑定 class 或 style 属性时，它支持其他值类型，例如数组或对象。有关更多详细信息，请参阅下面链接的指南部分。

当用于 prop 绑定时，prop 必须在子组件中正确声明。

当不带参数使用时，可以用来绑定包含属性名-值对的对象。注意，在这种模式下，class 和 style 不支持数组或对象。

示例

<!-- bind an attribute -->
<img v-bind:src="imageSrc">

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

<!-- shorthand -->
<img :src="imageSrc">

<!-- shorthand dynamic attribute name (2.6.0+) -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">

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

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

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- DOM attribute binding with prop modifier -->
<div v-bind:text-content.prop="text"></div>

<!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

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

.camel 修饰符允许在使用 DOM 内模板时将 v-bind 属性名转换为驼峰式，例如 SVG 的 viewBox 属性

<svg :view-box.camel="viewBox"></svg>

如果你使用字符串模板或使用 vue-loader/vueify 编译，则不需要 .camel。

另请参阅

v-model

预期： 根据表单输入元素的值或组件的输出而变化
限制于
- <input>
- <select>
- <textarea>
- 组件
修饰符
- .lazy - 监听 change 事件而不是 input
- .number - 将有效的输入字符串转换为数字
- .trim - 修剪输入
用法

在表单输入元素或组件上创建双向绑定。有关详细用法和其他说明，请参阅下面链接的指南部分。
另请参阅
- 表单输入绑定
- 组件 - 使用自定义事件的表单输入组件

v-slot

简写： #
预期： 在函数参数位置有效的 JavaScript 表达式（支持在支持的环境中解构）。可选 - 只有在期望将 props 传递到插槽时才需要。
参数： 插槽名称（可选，默认为 default）
限制于
- <template>
- 组件（用于带有 props 的单个默认插槽）
用法

表示命名插槽或期望接收 props 的插槽。

示例

<!-- Named slots -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

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

<!-- Named slot that receives props -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- Default slot that receive props, with destructuring -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

有关更多详细信息，请参阅下面的链接。

另请参阅
- 组件 - 插槽
- RFC-0001

v-pre

不期望表达式
用法

跳过此元素及其所有子元素的编译。您可以将其用于显示原始 mustache 标签。跳过大量没有指令的节点也可以加快编译速度。

示例

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

v-cloak

不期望表达式
用法

此指令将保留在元素上，直到关联的 Vue 实例完成编译。结合 CSS 规则，例如 [v-cloak] { display: none }，此指令可用于隐藏未编译的 mustache 绑定，直到 Vue 实例准备就绪。

示例

[v-cloak] {
  display: none;
}

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

<div> 在编译完成之前将不可见。

v-once

不期望表达式

详细信息

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

<!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- component -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` directive -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

另请参阅
- 数据绑定语法 - 插值
- 组件 - 使用 v-once 的廉价静态组件

特殊属性

key

预期： number | string | boolean (since 2.4.2) | symbol (since 2.5.12)

key 特殊属性主要用作 Vue 的虚拟 DOM 算法的提示，用于在将新节点列表与旧节点列表进行比较时识别 VNode。如果没有键，Vue 使用一种算法来最大程度地减少元素移动，并尝试尽可能地就地修补/重用相同类型的元素。使用键，它将根据键的顺序变化重新排序元素，并且不再存在的键的元素将始终被删除/销毁。

相同公共父级的子级必须具有唯一的键。重复的键会导致渲染错误。

最常见的用例是与 v-for 结合使用
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
它还可以用于强制替换元素/组件，而不是重用它。当您想要时，这可能很有用
- 正确触发组件的生命周期钩子
- 触发过渡
例如
<transition> <span :key="text">{{ text }}</span> </transition>
当 text 发生变化时，<span> 将始终被替换而不是修补，因此将触发过渡。

ref

预期： string

ref 用于注册对元素或子组件的引用。该引用将在父组件的 $refs 对象下注册。如果用于普通 DOM 元素，则引用将是该元素；如果用于子组件，则引用将是组件实例
 <p ref="p">hello</p>  <child-component ref="child"></child-component>
当用于带有 v-for 的元素/组件时，注册的引用将是一个包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的一个重要说明：因为 ref 本身是在渲染函数执行的结果中创建的，所以您不能在初始渲染时访问它们 - 它们还不存在！$refs 也不具有响应性，因此您不应尝试在模板中使用它进行数据绑定。
另请参阅： 子组件引用

is

预期： string | Object (component’s options object)

用于动态组件并解决 DOM 模板解析的局限性。

例如

<!-- component changes when currentView changes -->
<component v-bind:is="currentView"></component>

<!-- necessary because `<my-row>` would be invalid inside -->
<!-- a `<table>` element and so would be hoisted out      -->
<table>
  <tr is="my-row"></tr>
</table>

有关详细用法，请参阅上述说明中的链接。

另请参阅
- 动态组件
- DOM 模板解析的局限性

slot ^已弃用

在 2.6.0+ 中优先使用 v-slot。

预期： string

用于插入到子组件中的内容，以指示内容属于哪个命名插槽。
另请参阅： 使用 slot 的命名插槽

slot-scope ^已弃用

在 2.6.0+ 中优先使用 v-slot。

预期： function argument expression
用法

用于将元素或组件表示为作用域插槽。属性的值应为有效的 JavaScript 表达式，该表达式可以出现在函数签名的参数位置。这意味着在支持的环境中，您也可以在表达式中使用 ES2015 解构。在 2.5.0+ 中用作 scope 的替代品。

此属性不支持动态绑定。
另请参阅： 使用 slot-scope 的作用域插槽

scope ^已删除

在 2.5.0+ 中被 slot-scope 替换。在 2.6.0+ 中优先使用 v-slot。

用于将 <template> 元素表示为作用域插槽。

用法

与 slot-scope 相同，只是 scope 只能用于 <template> 元素。

内置组件

component

道具
- is - string | ComponentDefinition | ComponentConstructor
- inline-template - boolean

用法

用于渲染动态组件的“元组件”。要渲染的实际组件由 is 道具决定

<!-- a dynamic component controlled by -->
<!-- the `componentId` property on the vm -->
<component :is="componentId"></component>

<!-- can also render registered component or component passed as prop -->
<component :is="$options.components.child"></component>

另请参阅： 动态组件

transition

道具
- name - string，用于自动生成过渡 CSS 类名。例如 name: 'fade' 将自动扩展为 .fade-enter、.fade-enter-active 等。默认为 "v"。
- appear - boolean，是否在初始渲染时应用过渡。默认为 false。
- css - boolean，是否应用 CSS 过渡类。默认为 true。如果设置为 false，则只会触发通过组件事件注册的 JavaScript 钩子。
- type - string，指定要等待的过渡事件类型，以确定过渡结束时间。可用值为 "transition" 和 "animation"。默认情况下，它会自动检测持续时间更长的类型。
- 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> 用作单个元素/组件的过渡效果。<transition> 仅将过渡行为应用于包装的内容；它不会渲染额外的 DOM 元素，也不会出现在检查的组件层次结构中。

<!-- simple element -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

<!-- dynamic component -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- event hooking -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // for passed 'el' that DOM element as the argument, something ...
    }
  }
  ...
}).$mount('#transition-demo')

另请参阅： 过渡：进入、离开和列表

transition-group

道具
- tag - string，默认为 span。
- move-class - 覆盖移动过渡期间应用的 CSS 类。
- 公开与 <transition> 相同的道具，除了 mode。
活动
- 公开与 <transition> 相同的事件。
用法

<transition-group> 用作多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认情况下，它渲染一个 <span>，您可以通过 tag 属性配置它应该渲染什么元素。

请注意，<transition-group> 中的每个子元素都必须唯一地加键，才能使动画正常工作。

<transition-group> 通过 CSS 变换支持移动过渡。当子元素在屏幕上的位置在更新后发生变化时，它将被应用一个移动 CSS 类（从 name 属性自动生成或使用 move-class 属性配置）。如果 CSS transform 属性在应用移动类时是“可过渡的”，则该元素将使用 FLIP 技术平滑地动画到其目标位置。
<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>
另请参阅： 过渡：进入、离开和列表

keep-alive

道具
- include - string 或 RegExp 或 Array。只有具有匹配名称的组件才会被缓存。
- exclude - string 或 RegExp 或 Array。任何具有匹配名称的组件都不会被缓存。
- max - number。要缓存的组件实例的最大数量。

用法

当包装在动态组件周围时，<keep-alive> 会缓存非活动组件实例，而不会销毁它们。与 <transition> 类似，<keep-alive> 是一个抽象组件：它本身不渲染 DOM 元素，也不出现在组件父链中。

当 <keep-alive> 中的组件切换时，它的 activated 和 deactivated 生命周期钩子将相应地被调用。

在 2.2.0+ 及更高版本中，activated 和 deactivated 将为 <keep-alive> 树中的所有嵌套组件触发。

主要用于保留组件状态或避免重新渲染。

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

<!-- multiple conditional children -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- used together with `<transition>` -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

请注意，<keep-alive> 是为只有一个直接子组件被切换的情况而设计的。如果您在其中有 v-for，它将不起作用。当有多个条件子元素时，如上所示，<keep-alive> 要求一次只渲染一个子元素。

include 和 exclude

2.1.0+ 中的新增内容

include 和 exclude 道具允许有条件地缓存组件。这两个道具都可以是逗号分隔的字符串、RegExp 或数组

<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- regex (use `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先在组件自己的 name 选项上进行检查，然后检查其本地注册名称（父级 components 选项中的键），如果 name 选项不可用。匿名组件无法与之匹配。

max

2.5.0+ 中新增

要缓存的组件实例的最大数量。达到此数量后，在创建新实例之前，将销毁最近最少访问的缓存组件实例。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
<keep-alive> 不适用于函数式组件，因为它们没有可缓存的实例。
另请参阅： 动态组件 - keep-alive

slot

道具
- name - 字符串，用于命名插槽。
用法

<slot> 在组件模板中充当内容分发出口。<slot> 本身将被替换。

有关详细用法，请参阅下面链接的指南部分。
另请参阅： 使用插槽进行内容分发

VNode 接口

请参考 VNode 类声明。

服务器端渲染

请参考 vue-server-renderer 包文档。

API 3.x 2.x 1.0 0.12 0.11

API

全局配置

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

ignoredElements

keyCodes

performance

productionTip

全局 API

Vue.extend( options )

Vue.nextTick( [callback, context] )

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

Vue.delete( target, propertyName/index )

Vue.directive( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.use( plugin )

Vue.mixin( mixin )

Vue.compile( template )

Vue.observable( object )

Vue.version

选项/数据

data

props

propsData

computed

methods

watch

选项/DOM

el

template

render

renderError

选项/生命周期钩子

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

选项 / 资源

指令

过滤器

组件

选项 / 组成

父级

混入

扩展

提供 / 注入

选项 / 杂项

名称

分隔符

函数式

模型

继承属性

comments

实例属性

vm.$data

vm.$props

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$children

vm.$slots

vm.$scopedSlots

vm.$refs

vm.$isServer

vm.$attrs

vm.$listeners

实例方法 / 数据

API

slot ^已弃用

slot-scope ^已弃用

scope ^已删除