全局配置
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) -
用法：
// 务必在加载 Vue 之后，立即同步设置以下内容Vue.config.devtools = true配置是否允许 vue-devtools 检查代码。开发版本默认为
true，生产版本默认为false。生产版本设为true可以启用检查。
errorHandler
-
类型：
Function -
默认值：
undefined -
用法：
Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 }
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是
undefined时，被捕获的错误会通过console.error输出而避免应用崩溃。从 2.4.0 起这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。
错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。
warnHandler
2.4.0 新增
-
类型：
Function -
默认值：
undefined -
用法：
Vue.config.warnHandler = function (msg, vm, trace) { // `trace` 是组件的继承关系追踪 }
为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。
ignoredElements
-
类型：
Array -
默认值：
[] -
用法：
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component', // 用一个 `RegExp` 忽略所有“ion-”开头的元素 // 仅在 2.5+ 支持 /^ion-/ ]
须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于
Unknown custom element的警告。
keyCodes
-
类型：
{ [key: string]: number | Array} -
默认值：
{} -
用法：
Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "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.markAPI 的浏览器上。
productionTip
2.2.0 新增
-
类型：
boolean -
默认值：
true -
用法：
设置为
false以阻止 vue 在启动时生成生产提示。
全局 API
Vue.extend( options )
-
参数：
{Object} options
-
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data选项是特例，需要注意 - 在Vue.extend()中它必须是函数<div id="mount-point">div>
// 创建构造器 var Profile = Vue.extend({ template: '
{ {firstName}} { {lastName}} aka { {alias}}
', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')结果如下：
<p>Walter White aka Heisenbergp>
-
参考：组件
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('
{ { msg }}') 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| 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: '
{ { msg }}' }) 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。 -
参考：实例方法 / 数据 - vm.$watch
选项 / DOM
el
-
类型：
string | HTMLElement -
限制：只在由
new创建的实例中遵守。 -
详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用
vm.$el访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用
vm.$mount()手动开启编译。提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到
或者上。如果
render函数和template属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。 -
参考：
- 生命周期图示
- 运行时 + 编译器 vs. 只包含运行时
template
-
类型：
string -
详细：
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
如果值以
#开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用