vue.js 框架

全局配置

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

debug

类型: Boolean
默认值: false
用法
Vue.config.debug = true
在调试模式下，Vue 将
1. 打印所有警告的堆栈跟踪。
2. 使 DOM 中的所有锚节点作为注释节点可见。这使得检查渲染结果的结构更容易。
调试模式仅在开发版本中可用。

delimiters

类型: Array<String>
默认值: ["{{", "}}"]

用法

// ES6 template string style
Vue.config.delimiters = ['${', '}']

更改纯文本插值分隔符。

unsafeDelimiters

类型: Array<String>
默认值: ["{{{", "}}}"]

用法

// make it look more dangerous
Vue.config.unsafeDelimiters = ['{!!', '!!}']

更改原始 HTML 插值分隔符。

silent

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

async

类型: Boolean
默认值: true
用法
Vue.config.async = false
当异步模式关闭时，Vue 将在检测到数据更改时同步执行所有 DOM 更新。这可能有助于某些情况下的调试，但也可能导致性能下降并影响观察者回调的调用顺序。async: false 不建议在生产环境中使用。

devtools

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

全局 API

Vue.extend( options )

参数
- {Object} options

用法

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

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

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

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

将导致

<p>Walter White aka Heisenberg</p>

另请参阅: 组件

Vue.nextTick( callback )

参数
- {Function} callback
用法

将回调延迟到下一个 DOM 更新周期之后执行。在更改某些数据后立即使用它以等待 DOM 更新。
// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
// DOM updated
})
另请参阅: 异步更新队列

Vue.set( object, key, value )

参数
- {Object} object
- {String} key
- {*} value
返回值: 设置的值。
用法

在对象上设置属性。如果对象是响应式的，请确保属性被创建为响应式属性并触发视图更新。这主要用于解决 Vue 无法检测属性添加的限制。
另请参阅: 深入响应式

Vue.delete( object, key )

参数
- {Object} object
- {String} key
用法

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

Vue.directive( id, [definition] )

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

用法

注册或检索全局指令。

// register
Vue.directive('my-directive', {
  bind: function () {},
  update: function () {},
  unbind: function () {}
})
// register (simple function directive)
Vue.directive('my-directive', function () {
  // this will be called as `update`
})
// getter, return the directive definition if registered
var myDirective = Vue.directive('my-directive')

另请参阅: 自定义指令

Vue.elementDirective( id, [definition] )

参数
- {String} id
- {Object} [definition]

用法

注册或检索全局元素指令。

// register
Vue.elementDirective('my-element', {
  bind: function () {},
  // element directives do not use `update`
  unbind: function () {}
})
// getter, return the directive definition if registered
var myDirective = Vue.elementDirective('my-element')

另请参阅: 元素指令

Vue.filter( id, [definition] )

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

用法

注册或检索全局过滤器。

// register
Vue.filter('my-filter', function (value) {
  // return processed value
})
// two way filter
Vue.filter('my-filter', {
  read: function () {},
  write: function () {}
})
// getter, return the filter if registered
var myFilter = Vue.filter('my-filter')

另请参阅: 自定义过滤器

Vue.component( id, [definition] )

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

用法

注册或检索全局组件。

// 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.transition( id, [hooks] )

参数
- {String} id
- {Object} [hooks]

用法

注册或检索全局过渡钩子对象。

// register
Vue.transition('fade', {
  enter: function () {},
  leave: function () {}
})
// retrieve registered hooks
var fadeTransition = Vue.transition('fade')

另请参阅: 过渡.

Vue.partial( id, [partial] )

参数
- {String} id
- {String} [partial]

用法

注册或检索全局模板片段字符串。

// register
Vue.partial('my-partial', '<div>Hi</div>')
// retrieve registered partial
var myPartial = Vue.partial('my-partial')

另请参阅: 特殊元素 - <partial>.

Vue.use( plugin, [options] )

参数
- {Object | Function} plugin
- {Object} [options]
用法

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

Vue.mixin( mixin )

参数
- {Object} mixin
用法

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

选项 / 数据

data

类型: Object | Function
限制: 仅在组件定义中使用时才接受 Function。
细节

Vue 实例的数据对象。Vue.js 将递归地将其属性转换为 getter/setter 以使其“响应式”。对象必须是纯对象：忽略原生对象、现有 getter/setter 和原型属性。不建议观察复杂对象。

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

以 _ 或 $ 开头的属性不会在 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 }
  }
})

另请参阅: 深入响应式.

props

类型: Array | Object
细节

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

示例

// simple syntax
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})
// object syntax with validation
Vue.component('props-demo-advanced', {
  props: {
    // just type check
    size: Number,
    // type check plus other validations
    name: {
      type: String,
      required: true,
      // warn if not two way bound
      twoWay: true
    }
  }
})

另请参阅: Props

propsData

1.0.22+

类型: Object
限制: 仅在通过 new 创建实例时受尊重。
细节

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

示例

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

computed

类型: Object
细节

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

示例

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // get only, just need a function
    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

类型: Object
细节

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

示例

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

另请参阅: 方法和事件处理

watch

类型: Object
细节

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

示例

var vm = new Vue({
  data: {
    a: 1
  },
  watch: {
    'a': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // string method name
    'b': 'someMethod',
    // deep watcher
    'c': {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1

另请参阅: 实例方法 - vm.$watch

选项 / DOM

el

类型: String | HTMLElement | Function
限制: 仅在组件定义中使用时才接受类型 Function。
细节

为 Vue 实例提供一个现有的 DOM 元素来挂载。它可以是 CSS 选择器字符串、实际的 HTMLElement 或返回 HTMLElement 的函数。请注意，提供的元素仅用作挂载点；如果也提供了模板，它将被替换，除非 replace 设置为 false。解析后的元素将作为 vm.$el 访问。

在 Vue.extend 中使用时，必须提供一个函数，以便每个实例都获得一个单独创建的元素。

如果此选项在实例化时可用，则实例将立即进入编译；否则，用户必须显式调用 vm.$mount() 以手动启动编译。
另请参阅: 生命周期图

template

类型: String
细节

用作 Vue 实例标记的字符串模板。默认情况下，模板将替换挂载的元素。当 replace 选项设置为 false 时，模板将插入到挂载的元素中。在这两种情况下，挂载元素中的任何现有标记都将被忽略，除非模板中存在内容分发插槽。

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

请注意，在某些情况下，例如当模板包含多个顶级元素或仅包含纯文本时，实例将成为片段实例 - 即管理节点列表而不是单个节点的实例。片段实例的挂载点上的非流控制指令将被忽略。
另请参阅

replace

类型: Boolean
默认值: true
限制：仅在template选项也存在时才受尊重。
细节

确定是否用模板替换正在挂载的元素。如果设置为false，则模板将覆盖元素的内部内容，而不会替换元素本身。如果设置为true，则模板将覆盖元素并将元素的属性与组件根节点的属性合并。

示例:

<div id="replace" class="foo"></div>

new Vue({
  el: '#replace',
  template: '<p class="bar">replaced</p>'
})

将导致

<p class="foo bar" id="replace">replaced</p>

相比之下，当replace设置为false时

<div id="insert" class="foo"></div>

new Vue({
  el: '#insert',
  replace: false,
  template: '<p class="bar">inserted</p>'
})

将导致

<div id="insert" class="foo">
  <p class="bar">inserted</p>
</div>

选项 / 生命周期钩子

init

类型：Function
细节

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

created

类型：Function
细节

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

beforeCompile

类型：Function
细节

在编译开始之前调用。
另请参阅: 生命周期图

compiled

类型：Function
细节

在编译完成后调用。在此阶段，所有指令都已链接，因此数据更改将触发 DOM 更新。但是，$el不能保证已插入文档中。
另请参阅: 生命周期图

activate

类型：Function
参数
- {Function} done
细节

在编译完成后调用，就在ready钩子之前 - 但仅在动态组件交换期间或静态组件的初始渲染期间调用。与其他生命周期钩子不同，它接受一个done回调，必须调用该回调才能完成生命周期的其余部分。它最常用于在组件交换之前执行一些异步操作，例如从 API 获取数据。
另请参阅： 动态组件

ready

类型：Function
细节

在编译和$el第一次插入文档后调用，即在第一个attached钩子之后。请注意，此插入必须通过 Vue 执行（使用vm.$appendTo()等方法或作为指令更新的结果）才能触发ready钩子。
另请参阅: 生命周期图

attached

类型：Function
细节

当vm.$el通过指令或 VM 实例方法（如$appendTo()）附加到 DOM 时调用。直接操作vm.$el不会触发此钩子。

detached

类型：Function
细节

当vm.$el通过指令或 VM 实例方法从 DOM 中删除时调用。直接操作vm.$el不会触发此钩子。

beforeDestroy

类型：Function
细节

在 Vue 实例销毁之前调用。在此阶段，实例仍然可以完全正常工作。
另请参阅: 生命周期图

destroyed

类型：Function
细节

在 Vue 实例销毁后调用。当调用此钩子时，Vue 实例的所有绑定和指令都已解除绑定，所有子 Vue 实例也已销毁。

请注意，如果存在离开过渡，则destroyed钩子将在过渡完成后调用。
另请参阅: 生命周期图

选项 / 资产

directives

类型: Object
细节

要提供给 Vue 实例的指令的哈希表。
另请参阅
- 自定义指令
- 资产命名约定

elementDirectives

类型: Object
细节

要提供给 Vue 实例的元素指令的哈希表。
另请参阅
- 元素指令
- 资产命名约定

filters

类型: Object
细节

要提供给 Vue 实例的过滤器的哈希表。
另请参阅
- 自定义过滤器
- 资产命名约定

components

类型: Object
细节

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

transitions

类型: Object
细节

要提供给 Vue 实例的过渡的哈希表。
另请参阅
- 过渡

partials

类型: Object
细节

要提供给 Vue 实例的部分字符串的哈希表。
另请参阅
- 特殊元素 - 部分

选项 / 杂项

parent

类型：Vue instance
细节

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

events

类型: Object
细节

一个对象，其中键是要监听的事件，值是相应的回调。请注意，这些是 Vue 事件，而不是 DOM 事件。值也可以是方法名称的字符串。Vue 实例将在实例化时为对象中的每个条目调用$on()。

示例

var vm = new Vue({
  events: {
    'hook:created': function () {
      console.log('created!')
    },
    greeting: function (msg) {
      console.log(msg)
    },
    // can also use a string for methods
    bye: 'sayGoodbye'
  },
  methods: {
    sayGoodbye: function () {
      console.log('goodbye!')
    }
  }
}) // -> created!
vm.$emit('greeting', 'hi!') // -> hi!
vm.$emit('bye')             // -> goodbye!

另请参阅
- 实例方法 - 事件
- 父子通信

mixins

类型：Array
细节

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

混合钩子按提供的顺序调用，并在组件自己的钩子之前调用。

示例

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

另请参阅： 混合

name

类型: String
限制：仅在Vue.extend()中使用时才受尊重。
细节

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

指定name选项的另一个好处是控制台检查。当在控制台中检查扩展的 Vue 组件时，默认构造函数名称为VueComponent，这不太有信息量。通过向Vue.extend()传递一个可选的name选项，您将获得更好的检查输出，以便您知道正在查看哪个组件。该字符串将被骆驼化并用作组件的构造函数名称。

示例

var Ctor = Vue.extend({
  name: 'stack-overflow',
  template:
    '<div>' +
      // recursively invoke self
      '<stack-overflow></stack-overflow>' +
    '</div>'
})
// this will actually result in a max stack size exceeded
// error, but let's assume it works...
var vm = new Ctor()
console.log(vm) // -> StackOverflow {$el: null, ...}

extends

1.0.22+

类型: Object | Function
细节

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

这类似于mixins，区别在于组件自己的选项优先于要扩展的源组件。

示例

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

实例属性

vm.$data

类型: Object
细节

Vue 实例正在观察的数据对象。您可以用一个新对象替换它。Vue 实例代理对数据对象上属性的访问。

vm.$el

类型：HTMLElement
只读
细节

Vue 实例正在管理的 DOM 元素。请注意，对于片段实例，vm.$el将返回一个锚节点，该节点指示片段的起始位置。

vm.$options

类型: Object
只读

细节

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

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

vm.$parent

类型：Vue instance
只读
细节

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

vm.$root

类型：Vue instance
只读
细节

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

vm.$children

类型：Array<Vue instance>
只读
细节

当前实例的直接子组件。

vm.$refs

类型: Object
只读
细节

一个对象，其中包含已注册v-ref的子组件。
另请参阅
- 子组件引用
- v-ref.

vm.$els

类型: Object
只读
细节

一个对象，其中包含已注册v-el的 DOM 元素。
另请参阅： v-el.

实例方法 / 数据

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

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

观察 Vue 实例上的表达式或计算函数以进行更改。回调将使用新值和旧值调用。表达式可以是单个键路径或任何有效的绑定表达式。

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

示例

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

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

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

选项：deep

要检测对象内部的嵌套值更改，您需要在选项参数中传入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`

vm.$get( expression )

参数
- {String} expression
用法

从 Vue 实例中检索给定表达式的值。抛出错误的表达式将被抑制并返回undefined。

示例

var vm = new Vue({
  data: {
    a: {
      b: 1
    }
  }
})
vm.$get('a.b') // -> 1
vm.$get('a.b + 1') // -> 2

vm.$set( keypath, value )

参数
- {String} keypath
- {*} value
用法

使用有效的键路径在 Vue 实例上设置数据值。在大多数情况下，您应该优先使用纯对象语法设置属性，例如vm.a.b = 123。此方法仅在两种情况下需要
1. 当您有键路径字符串并希望使用该键路径动态设置值时。
2. 当您想设置一个不存在的属性时。
如果路径不存在，它将被递归创建并变为响应式。如果由于 `$set` 调用创建了新的根级响应式属性，则 Vue 实例将被强制进入“消化周期”，在此期间，其所有观察者将被重新评估。

示例

var vm = new Vue({
  data: {
    a: {
      b: 1
    }
  }
})
// set an existing path
vm.$set('a.b', 2)
vm.a.b // -> 2
// set a non-existent path, will force digest
vm.$set('c', 3)
vm.c // -> 3

另请参阅: 深入响应式

vm.$delete( key )

参数
- {String} key
用法

删除 Vue 实例上的根级属性（及其 `$data`）。强制执行消化周期。不推荐。

vm.$eval( expression )

参数
- {String} expression
用法

在当前实例上评估有效的绑定表达式。表达式也可以包含过滤器。

示例

// assuming vm.msg = 'hello'
vm.$eval('msg | uppercase') // -> 'HELLO'

vm.$interpolate( templateString )

参数
- {String} templateString
用法

评估包含 mustache 插值的模板字符串片段。请注意，此方法仅执行字符串插值；属性指令被忽略。

示例

// assuming vm.msg = 'hello'
vm.$interpolate('{{msg}} world!') // -> 'hello world!'

vm.$log( [keypath] )

参数
- {String} [keypath]
用法

将当前实例数据作为普通对象记录，这比一堆 getter/setter 更便于检查。还可以接受可选的键。
vm.$log() // logs entire ViewModel data
vm.$log('item') // logs vm.item

实例方法 / 事件

vm.$on( event, callback )

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

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

示例

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} [event]
- {Function} [callback]
用法

删除事件监听器。
- 如果未提供任何参数，则删除所有事件监听器；
- 如果只提供事件，则删除该事件的所有监听器；
- 如果同时提供事件和回调，则仅删除该特定回调的监听器。

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

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

vm.$dispatch( event, […args] )

参数
- {String} event
- [...args]
用法

分派事件，首先在实例本身触发，然后沿父级链向上传播。传播在触发父级事件监听器时停止，除非该监听器返回 `true`。任何附加参数都将传递到监听器的回调函数中。

示例

// create a parent chain
var parent = new Vue()
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: child1 })
parent.$on('test', function () {
  console.log('parent notified')
})
child1.$on('test', function () {
  console.log('child1 notified')
})
child2.$on('test', function () {
  console.log('child2 notified')
})
child2.$dispatch('test')
// -> "child2 notified"
// -> "child1 notified"
// parent is NOT notified, because child1 didn't return
// true in its callback

另请参阅： 父子通信

vm.$broadcast( event, […args] )

参数
- {String} event
- [...args]
用法

广播一个向下传播到当前实例所有后代的事件。由于后代扩展为多个子树，因此事件传播将遵循许多不同的“路径”。每条路径的传播将在该路径上触发监听器回调时停止，除非回调返回 `true`。

示例

var parent = new Vue()
// child1 and child2 are siblings
var child1 = new Vue({ parent: parent })
var child2 = new Vue({ parent: parent })
// child3 is nested under child2
var child3 = new Vue({ parent: child2 })
child1.$on('test', function () {
  console.log('child1 notified')
})
child2.$on('test', function () {
  console.log('child2 notified')
})
child3.$on('test', function () {
  console.log('child3 notified')
})
parent.$broadcast('test')
// -> "child1 notified"
// -> "child2 notified"
// child3 is NOT notified, because child2 didn't return
// true in its callback

实例方法 / DOM

vm.$appendTo( elementOrSelector, [callback] )

参数
- {Element | String} elementOrSelector
- {Function} [callback]
返回值： `vm` - 实例本身
用法

将 Vue 实例的 DOM 元素或片段追加到目标元素。目标可以是元素或查询选择器字符串。此方法将触发过渡（如果存在）。回调在过渡完成后触发（如果未触发过渡，则立即触发）。

vm.$before( elementOrSelector, [callback] )

参数
- {Element | String} elementOrSelector
- {Function} [callback]
返回值： `vm` - 实例本身
用法

在目标元素之前插入 Vue 实例的 DOM 元素或片段。目标可以是元素或查询选择器字符串。此方法将触发过渡（如果存在）。回调在过渡完成后触发（如果未触发过渡，则立即触发）。

vm.$after( elementOrSelector, [callback] )

参数
- {Element | String} elementOrSelector
- {Function} [callback]
返回值： `vm` - 实例本身
用法

在目标元素之后插入 Vue 实例的 DOM 元素或片段。目标可以是元素或查询选择器字符串。此方法将触发过渡（如果存在）。回调在过渡完成后触发（如果未触发过渡，则立即触发）。

vm.$remove( [callback] )

参数
- {Function} [callback]
返回值： `vm` - 实例本身
用法

从 DOM 中删除 Vue 实例的 DOM 元素或片段。此方法将触发过渡（如果存在）。回调在过渡完成后触发（如果未触发过渡，则立即触发）。

vm.$nextTick( callback )

参数
- {Function} [callback]
用法

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

示例

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.$mount( [elementOrSelector] )

参数
- {Element | String} [elementOrSelector]
返回值： `vm` - 实例本身
用法

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

如果未提供任何参数，则模板将作为文档外片段创建，您必须使用其他 DOM 实例方法将其插入文档中。如果 `replace` 选项设置为 `false`，则将自动创建一个空的 `<div>` 作为包装元素。

在已挂载的实例上调用 `$mount()` 不会有任何效果。该方法返回实例本身，因此您可以在其后链接其他实例方法。

示例

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, compile off-document and append afterwards:
new MyComponent().$mount().$appendTo('#container')

另请参阅: 生命周期图

vm.$destroy( [remove] )

参数
- {Boolean} [remove] - 默认值：false
用法

完全销毁 vm。清理它与其他现有 vm 的连接，解除绑定所有指令，关闭所有事件监听器，如果 `remove` 参数为 true，则从 DOM 中删除其关联的 DOM 元素或片段。

触发 `beforeDestroy` 和 `destroyed` 钩子。
另请参阅: 生命周期图

指令

v-text

期望： `String`
细节

更新元素的 `textContent`。

在内部，`{{ Mustache }}` 插值也被编译为文本节点上的 `v-text` 指令。指令形式需要包装元素，但性能略好，并避免了 FOUC（未编译内容闪烁）。

示例

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

v-html

期望： `String`
细节

更新元素的 `innerHTML`。内容被插入为纯 HTML - 数据绑定被忽略。如果您需要重用模板片段，您应该使用部分。

在内部，`{{{ Mustache }}}` 插值也被编译为使用锚节点的 `v-html` 指令。指令形式需要包装元素，但性能略好，并避免了 FOUC（未编译内容闪烁）。

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

示例

<div v-html="html"></div>
<!-- same as -->
<div>{{{html}}}</div>

v-if

期望： `*`
用法

根据表达式的真值有条件地渲染元素。元素及其包含的数据绑定/组件在切换期间被销毁和重建。如果元素是 `<template>` 元素，则其内容将被提取为条件块。
另请参阅： 条件渲染

v-show

期望： `*`
用法

根据表达式的真值切换元素的 `display` CSS 属性。触发过渡（如果存在）。
另请参阅： 条件渲染 - v-show

v-else

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

用法

表示 `v-if` 和 `v-show` 的“else 块”。

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

另请参阅： 条件渲染 - v-else
另请参阅： 条件渲染 - 组件注意事项

v-for

期望： `Array | Object | Number | String`
参数属性
用法

根据源数据多次渲染元素或模板块。指令的值必须使用特殊语法 `alias (in|of) expression` 来提供正在迭代的当前元素的别名
<div v-for="item in items">
{{ item.text }}
</div>
请注意，使用 `of` 作为分隔符仅在 1.0.17+ 版本中受支持。

或者，您也可以为索引（或在对象上使用时为键）指定别名
<div v-for="(index, item) in items"></div>
<div v-for="(key, val) in object"></div>
下面链接的指南部分详细介绍了 `v-for` 的用法。
另请参阅： 列表渲染。

v-on

简写： `@`
期望： `Function | Inline Statement`
参数： `event (required)`
修饰符
- .stop - 调用 `event.stopPropagation()`。
- .prevent - 调用 `event.preventDefault()`。
- .capture - 在捕获模式下添加事件监听器。
- .self - 仅当事件从该元素分派时才触发处理程序。
- .{keyCode | keyAlias} - 仅在某些键上触发处理程序。
用法

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

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

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

1.0.11+ 当监听自定义事件时，内联语句可以访问特殊的 `$arguments` 属性，它是一个包含传递给子组件的 `$emit` 调用的附加参数的数组。

示例

<!-- method handler -->
<button v-on:click="doThis"></button>
<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- shorthand -->
<button @click="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">

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

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

另请参阅: 方法和事件处理

v-bind

简写： `:`
期望： `* (with argument) | Object (without argument)`
参数： `attrOrProp (optional)`
修饰符
- .sync - 使绑定双向。仅适用于 prop 绑定。
- .once - 使绑定一次性。仅适用于 prop 绑定。
- .camel - 在设置属性时将其属性名称转换为 camelCase。仅适用于普通属性。用于绑定 camelCase SVG 属性。
用法

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

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

当用于道具绑定时，道具必须在子组件中正确声明。道具绑定可以使用其中一个修饰符指定不同的绑定类型。

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

示例

<!-- bind an attribute -->
<img v-bind:src="imageSrc">
<!-- shorthand -->
<img :src="imageSrc">
<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- 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>
<!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>
<!-- two-way prop binding -->
<my-component :prop.sync="someThing"></my-component>
<!-- one-time prop binding -->
<my-component :prop.once="someThing"></my-component>

另请参阅
- 类和样式绑定
- 组件道具

v-model

预期：根据输入类型而异
限于
- <input>
- <select>
- <textarea>
参数属性
用法

在表单输入元素上创建双向绑定。有关详细用法，请参阅下面链接的指南部分。
另请参阅： 表单输入绑定

v-ref

不期望表达式
限于：子组件
参数： `id (必需)`
用法

在子组件的父组件上注册对子组件的引用，以便直接访问。不期望表达式。必须提供一个参数作为要注册的 ID。组件实例将在其父组件的 `$refs` 对象上可用。

当与 `v-for` 一起在组件上使用时，注册的值将是一个数组，其中包含与它们绑定的数组相对应的所有子组件实例。如果 `v-for` 的数据源是对象，则注册的值将是一个对象，其中包含与源对象镜像的键-实例对。
注意

由于 HTML 不区分大小写，因此像 `v-ref:someRef` 这样的驼峰式命名将被转换为全小写。您可以使用 `v-ref:some-ref`，它会正确设置 `this.$refs.someRef`。

示例

<comp v-ref:child></comp>
<comp v-ref:some-child></comp>

// access from parent:
this.$refs.child
this.$refs.someChild

与 `v-for` 一起使用

<comp v-ref:list v-for="item in list"></comp>

// this will be an array in parent
this.$refs.list

另请参阅： 子组件引用

v-el

不期望表达式
参数： `id (必需)`
用法

在拥有它的 Vue 实例的 `$els` 对象上注册对 DOM 元素的引用，以便更轻松地访问。
注意

由于 HTML 不区分大小写，因此像 `v-el:someEl` 这样的驼峰式命名将被转换为全小写。您可以使用 `v-el:some-el`，它会正确设置 `this.$els.someEl`。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

v-pre

不期望表达式
用法

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

示例

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

v-cloak

不期望表达式
用法

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

示例

[v-cloak] {
  display: none;
}

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

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

特殊元素

component

属性
- is
参数属性
- keep-alive
- transition-mode

用法

用于调用组件的替代语法。主要用于使用 `is` 属性的动态组件

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

另请参阅： 动态组件

slot

属性
- name
用法

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

带有 `name` 属性的 slot 称为命名 slot。命名 slot 将分发具有与其名称匹配的 `slot` 属性的内容。

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

partial

属性
- name
用法

<partial> 元素充当注册的模板部分的出口。部分内容在插入时也会由 Vue 编译。<partial> 元素本身将被替换。它需要一个 `name` 属性，该属性将用于解析部分的内容。

示例

// registering a partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')

<!-- a static partial -->
<partial name="my-partial"></partial>
<!-- a dynamic partial -->
<!-- renders partial with id === vm.partialId -->
<partial v-bind:name="partialId"></partial>
<!-- dynamic partial using v-bind shorthand -->
<partial :name="partialId"></partial>

过滤器

capitalize

示例
{{ msg | capitalize }}
‘abc’ => ‘Abc’

uppercase

示例
{{ msg | uppercase }}
‘abc’ => ‘ABC’

lowercase

示例
{{ msg | lowercase }}
‘ABC’ => ‘abc’

currency

参数
- {String} [symbol] - 默认值：'$'
- 1.0.22+ {Number} [decimal places] - 默认值：2
示例
{{ amount | currency }}
12345 => $12,345.00

使用不同的符号
{{ amount | currency '£' }}
12345 => £12,345.00

一些货币有 3 或 4 位小数，而另一些则没有，例如日元 (¥) 或越南盾 (₫)
{{ amount | currency '₫' 0 }}
12345 => ₫12,345

pluralize

参数
- {String} single, [double, triple, ...]
用法

根据过滤后的值对参数进行复数化。当只有一个参数时，复数形式只需在末尾添加一个“s”。当有多个参数时，这些参数将用作字符串数组，对应于要复数化的单词的单数、双数、三数…形式。当要复数化的数字超过参数的长度时，它将使用数组中的最后一个条目。
示例
{{count}} {{count | pluralize 'item'}}
1 => ‘1 item’
2 => ‘2 items’
{{date}}{{date | pluralize 'st' 'nd' 'rd' 'th'}}
将导致

1 => ‘1st’
2 => ‘2nd’
3 => ‘3rd’
4 => ‘4th’
5 => ‘5th’

json

参数
- {Number} [indent] - 默认值：2
用法

输出对值调用 `JSON.stringify()` 的结果，而不是输出 `toString()` 值（例如 `[object Object]`）。
示例

使用 4 个空格缩进打印对象
<pre>{{ nestedObject | json 4 }}</pre>

debounce

限于：期望 `Function` 值的指令，例如 `v-on`
参数
- {Number} [wait] - 默认值：300
用法

包装处理程序以将其去抖动 `x` 毫秒，其中 `x` 是参数。默认等待时间为 300 毫秒。去抖动的处理程序将延迟，直到调用时刻后至少经过 `x` 毫秒；如果在延迟时间段之前再次调用处理程序，则延迟时间段将重置为 `x` 毫秒。
示例
<input @keyup="onKeyup | debounce 500">

limitBy

限于：期望 `Array` 值的指令，例如 `v-for`
参数
- {Number} limit
- {Number} [offset]

用法

将数组限制为前 N 个项目，如参数所指定。可以提供一个可选的第二个参数来设置起始偏移量。

<!-- only display first 10 items -->
<div v-for="item in items | limitBy 10"></div>
<!-- display items 5 to 15 -->
<div v-for="item in items | limitBy 10 5"></div>

filterBy

限于：期望 `Array` 值的指令，例如 `v-for`
参数
- {String | Function} targetStringOrFunction
- "in" (可选分隔符)
- {String} [...searchKeys]
用法

返回源数组的过滤版本。第一个参数可以是字符串或函数。

当第一个参数是字符串时，它将用作要搜索的数组中每个元素的目标字符串
<div v-for="item in items | filterBy 'hello'">
在上面的示例中，只有包含目标字符串 `“hello”` 的项目才会显示。

如果项目是对象，则过滤器将递归地搜索对象的每个嵌套属性以查找目标字符串。要缩小搜索范围，可以指定其他搜索键
<div v-for="user in users | filterBy 'Jack' in 'name'">
在上面的示例中，过滤器将只在每个用户对象的 `name` 字段中搜索 `“Jack”`。**始终限制搜索范围以提高性能是一个好主意。**

上面的示例使用的是静态参数 - 当然，我们可以使用动态参数作为目标字符串或搜索键。结合 `v-model`，我们可以轻松地实现类型提前过滤
<div id="filter-by-example">
<input v-model="name">
<ul>
<li v-for="user in users | filterBy name in 'name'">
{{ user.name }}
</li>
</ul>
</div>
new Vue({
el: '#filter-by-example',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' }
]
}
})
- {{ user.name }}

其他示例

多个搜索键

<li v-for="user in users | filterBy searchText in 'name' 'phone'"></li>

使用动态数组参数的多个搜索键

<!-- fields = ['fieldA', 'fieldB'] -->
<div v-for="user in users | filterBy searchText in fields">

使用自定义过滤器函数

<div v-for="user in users | filterBy myCustomFilterFunction">

orderBy

限于：期望 `Array` 值的指令，例如 `v-for`
参数
- {String | Array<String> | Function} ...sortKeys
- {String} [order] - 默认值：1
用法

返回源数组的排序版本。您可以传递任意数量的字符串以按键排序。您还可以传递包含排序键的数组或函数，如果您想使用自己的排序策略。可选的 `order` 参数指定结果应该是升序 ( `order >= 0` ) 还是降序 ( `order < 0` ) 顺序。

对于原始值的数组，只需省略 `sortKeys` 并提供顺序，例如 `orderBy 1`。

示例

按姓名对用户进行排序

<ul>
  <li v-for="user in users | orderBy 'name'">
    {{ user.name }}
  </li>
</ul>

按降序排列

<ul>
  <li v-for="user in users | orderBy 'name' -1">
    {{ user.name }}
  </li>
</ul>

对原始值进行排序

<ul>
  <li v-for="n in numbers | orderBy true">
    {{ n }}
  </li>
</ul>

动态排序顺序

<div id="orderby-example">
  <button @click="order = order * -1">Reverse Sort Order</button>
  <ul>
    <li v-for="user in users | orderBy 'name' order">
      {{ user.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '#orderby-example',
  data: {
    order: 1,
    users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
  }
})

使用两个键排序

<ul>
  <li v-for="user in users | orderBy 'lastName' 'firstName'">
    {{ user.lastName }} {{ user.firstName }}
  </li>
</ul>

{{ user.name }}

使用函数排序

<div id="orderby-compare-example" class="demo">
  <button @click="order = order * -1">Reverse Sort Order</button>
  <ul>
    <li v-for="user in users | orderBy ageByTen order">
      {{ user.name }} - {{ user.age }}
    </li>
  </ul>
</div>

new Vue({
  el: '#orderby-compare-example',
  data: {
    order: 1,
    users: [
      {
        name: 'Jackie',
        age: 62
      },
      {
        name: 'Chuck',
        age: 76
      },
      {
        name: 'Bruce',
        age: 61
      }
    ]
  },
  methods: {
    ageByTen: function (a, b) {
      return Math.floor(a.age / 10) - Math.floor(b.age / 10)
    }
  }
})

{{ user.name }} - {{ user.age }}

数组扩展方法

Vue.js 使用两个额外的函数扩展了 `Array.prototype`，这使得执行一些常见的数组操作变得更加容易，同时确保正确触发响应式更新。

array.$set(index, value)

参数
- {Number} index
- {*} value
用法

通过索引将数组中的元素设置为值并触发视图更新。
vm.animals.$set(0, { name: 'Aardvark' })
另请参阅： 数组检测注意事项

array.$remove(reference)

参数
- {Reference} reference
用法

通过引用从数组中删除元素并触发视图更新。这是一种语法糖方法，用于首先在数组中搜索元素，然后如果找到，则调用 `array.splice(index, 1)`。
var aardvark = vm.animals[0]
vm.animals.$remove(aardvark)
另请参阅： 变异方法

API 2.0 1.0 0.12 0.11

全局配置

debug

delimiters

unsafeDelimiters

silent

async

devtools

全局 API

Vue.extend( options )

Vue.nextTick( callback )

Vue.set( object, key, value )

Vue.delete( object, key )

Vue.directive( id, [definition] )

Vue.elementDirective( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.transition( id, [hooks] )

Vue.partial( id, [partial] )

Vue.use( plugin, [options] )

Vue.mixin( mixin )

选项 / 数据

data

props

propsData

computed

methods

watch

选项 / DOM

el

template

replace

选项 / 生命周期钩子

init

created

beforeCompile

compiled

activate

ready

attached

detached

beforeDestroy

destroyed

选项 / 资产

directives

elementDirectives

filters

components

transitions

partials

选项 / 杂项

parent

events

mixins

name

extends

实例属性

vm.$data

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$children

vm.$refs

vm.$els

实例方法 / 数据

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

vm.$get( expression )

vm.$set( keypath, value )

vm.$delete( key )

vm.$eval( expression )

vm.$interpolate( templateString )

vm.$log( [keypath] )

实例方法 / 事件

vm.$on( event, callback )

vm.$once( event, callback )

vm.$off( [event, callback] )

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

vm.$dispatch( event, […args] )

vm.$broadcast( event, […args] )

API