Vue.extend( options )
-
参数：
{Object} options
-
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data选项是特例，需要注意 - 在Vue.extend()中它必须是函数<div id="mount-point"></div>// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')结果如下：
<p>Walter White aka Heisenberg</p>
|
Vue.nextTick( [callback, context] )
-
参数：
{Function} [callback]{Object} [context]
-
用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。
Vue.set( target, key, value )
-
参数：
{Object | Array} target{string | number} key{any} value
-
返回值：设置的值。
-
用法：
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如
this.myObject.newProperty = 'hi')注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
Vue.delete( target, key )
-
参数：
{Object | Array} target{string | number} key/index
仅在 2.2.0+ 版本中支持 Array + index 用法。
-
用法：
删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。
在 2.2.0+ 中同样支持在数组上工作。
目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
Vue.directive( id, [definition] )
-
参数：
{string} id{Function | Object} [definition]
-
用法：
注册或获取全局指令。
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive') -
参考：自定义指令
Vue.filter( id, [definition] )
-
参数：
{string} id{Function} [definition]
-
用法：
注册或获取全局过滤器。
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter') -
参考：过滤器
Vue.component( id, [definition] )
-
参数：
{string} id{Function | Object} [definition]
-
用法：
注册或获取全局组件。注册还会自动使用给定的
id设置组件的名称// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component') -
参考：组件
Vue.use( plugin )
-
参数：
{Object | Function} plugin
-
用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供
install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用，插件将只会被安装一次。
-
参考：插件
Vue.mixin( mixin )
-
参数：
{Object} mixin
-
用法：
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
-
参考：全局混入
Vue.compile( template )
-
参数：
{string} template
-
用法：
在 render 函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
}) -
参考：渲染函数
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 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。
实例创建之后，可以通过
vm.$data访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问vm.a等价于访问vm.$data.a。以
_或$开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如vm.$data._property的方式访问这些属性。当一个组件被定义，
data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。如果需要，可以通过将
vm.$data传入JSON.parse(JSON.stringify(...))得到深拷贝的原始数据对象。 -
示例：
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})注意，如果你为
data属性使用了箭头函数，则this不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。data: vm => ({ a: vm.myProp })
props
-
类型：
Array<string> | Object -
详细：
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
-
示例：
// 简单语法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 对象语法，提供校验
Vue.component('props-demo-advanced', {
props: {
// 检测类型
height: Number,
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
}) -
参考：Props
propsData
-
类型：
{ [key: string]: any } -
限制：只用于
new创建的实例中。 -
详细：
创建实例时传递 props。主要作用是方便测试。
-
示例：
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
}) -
参考：Props
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: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
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 } -
详细：
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的
this自动绑定为 Vue 实例。注意，不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.a将是 undefined。 -
示例：
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()，遍历 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)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
-
注意，不应该使用箭头函数来定义 watcher 函数 (例如
searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.updateAutocomplete将是 undefined。
选项 / DOM
el
-
类型：
string | HTMLElement -
限制：只在由
new创建的实例中遵守。 -
详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用
vm.$el访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用
vm.$mount()手动开启编译。提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到
<html>或者<body>上。如果
render函数和template属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。 -
参考：
template
-
类型：
string -
详细：
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
如果值以
#开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用<script type="x-template">包含模板。出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。
如果 Vue 选项中包含渲染函数，该模板将被忽略。
-
参考：
render
-
类型：
(createElement: () => VNode) => VNode -
详细：
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个
createElement方法作为第一个参数用来创建VNode。如果组件是一个函数组件，渲染函数还会接收一个额外的
context参数，为没有实例的函数组件提供上下文信息。Vue 选项中的
render函数若存在，则 Vue 构造函数不会从template选项或通过el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。 -
参考：渲染函数
renderError
2.2.0 新增
-
类型：
(createElement: () => VNode, error: Error) => VNode -
详细：
只在开发者环境下工作。
当
render函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError。这个功能配合 hot-reload 非常实用。 -
示例：
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 -
详细：
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
-
参考：生命周期图示
created
-
类型：
Function -
详细：
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，
$el属性目前不可见。 -
参考：生命周期图示
beforeMount
-
类型：
Function -
详细：
在挂载开始之前被调用：相关的
render函数首次被调用。该钩子在服务器端渲染期间不被调用。
-
参考：生命周期图示
mounted
-
类型：
Function -
详细：
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。注意
mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉mounted：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 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意
updated不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉updated：updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}该钩子在服务器端渲染期间不被调用。
-
参考：生命周期图示
activated
-
类型：
Function -
详细：
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
-
参考：