全局配置

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

#slient

• 类型：boolean

• 默认值：false

• 用法：Vue.config.silent =true

  取消Vue所有的日志与警告

#optionMergeStragies

• 类型：{[key:string]:Function}

• 默认值：{}

• 用法：

  Vue.config.optionMergeStrategies._my_option = function(parent,child,vm){      return child + 1   }  const Profile = Vue.extend({_my_option:1})复制代码

• 用法说明： 自定义合并策略的选项。合并侧罗选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数，Vue实例上下文被作为第三个参数传入

#devtools

• 类型：boolean

• 默认值：true(生产版为false)

• 用法：

  // 务必在加载Vue之后，立即同步设置一下内容  Vue.config.devtools = true复制代码

• 说明：配置是否允许vue-devtools 检查代码。开发版本默认为true，生产版本默认为false.

#errorHandler

• 类型：Function

• 默认值：undefined

• 用法：

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

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

• 从2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误，同样的，当这个钩子是undefined时，被不活的错误会铜鼓console.error输出而避免应用崩溃

• 从2.4.0 起 这个钩子也会捕获Vue自定义事件处理函数内部的错误了

• 错误追踪服务Sentry和Bugsnag 都用过此选项提供官方支持

#warnHandler

• 类型：Function

• 默认值：undefined

• 用法：

  Vue.config.warnHandler = function(msg,vm,trace){     // trace 是组件的继承关系追踪  }复制代码

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

#ignoredElements

• 类型：Array<string|RegExp>

• 默认值： []

• 用法：

  Vue.config.ignoredElements = [   'my-custom-web-component',   'another-web-component',   // 用一个RegExp 忽略所哟ion-开头的元素，仅在2.5+ 支持  /^ion-/  ]复制代码

#keyCode

• 类型： {[key:string]:number|Array}

• 默认值： {}

• 用法：

  Vue.config.keyCode = {      v:86,      f1:112,      mediaPlayPause:179, // camelCase 不可用      “media-play-pause”:179,      up:[38,87]  }  复制代码

#performance

2.2.0新增

• 类型：boolean

• 默认值: false(自2.2.3起)

• 用法： 设置为true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API的浏览器上

  Vue.config.performance = true复制代码

#productionTip

2.2.0新增

• 类型：boolean

• 默认值：true

• 用法： 设置为false以阻止vue在启动时生产提示

  Vue.config.productionTip = false    复制代码

全局API

#Vue.extend(options)

• 参数：
  • {object} options
• 用法：

使用基础Vue构造器，创建一个‘子类’。参数是一个包含组件选项的对象。data选项是特例，需要注意-在Vue.extend()中它必须是函数 <div id='mount-point> // 创建构造器 var Profile = Vue.extend({ template :'

{

{firstName}} { {lastName}} aka { {alias}}

', data: function(){ return { firstName: 'Walter', lastName:'White', alias:'Hersenberg' } } }) new Profile().$mount('#mount-point') 结果如下

Walter White aka Hersenberg

#Vue.nextTick([callback,context])

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

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

Vue.newTick(function(){        //DOM更新了    })    // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)    Vue.nextTick().then(function(){        // //DOM更新了    })复制代码

2.1.0 起新增：如果没有提供回调且在支持Promise的环境中，则返回一个Promise。请注意Vue不自带Promise的polyfill,所有如果你的目标浏览器不支持Promise ，你得自己提供polyfill

#Vue.set(target,key,value)

• 参数：
  • {Object|Array} target
  • {string | number} key
  • {any} value
• 返回值：设置的值
• 用法： 设置对象的属性。如果对象是响应是的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要避开Vue不能检测属性被添加的限制。

注意对象不能是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 | Obejct} [definition]

• 用法： 注册或获取全局指令

  // 注册  Vue.directive('my-direcitve',{      bind:function(){},      inserted:function(){}，      update：function(){},      componentUpdated:function(){},      unbind(){}  })  // 注册  Vue.directive('my-diretive',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.component('my-component',{})

// 获取注册的组件， var MyComponent = Vue.component('my-component')

#Vue.use(plugin)

• 参数
  • {Object|Function} pugin
• 用法： 安装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){

  }else if(version === 1){

  }else{

  }

选项/数据

#data

• 类型： Object | Function
• 限制： 组件的定义只接受function
• 详细：

Vue 实例的数据对象。Vue将会递归将date的属性转换为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}     } })复制代码

#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 } } } })

#propsData

• 类型： {[key:string]:any}
• 限制： 只用于new创建的实例中。
• 详细：创建实例时传递props。主要作用是方便测试。
• 示例： var Comp = Vue.extend({ props:['msg'], template:'
  {

  {msg}}

  ' }) 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:{ aDouble:function(){ return this.a * 2 }, aPlus:{ get:function(){ return this.a + 1 }, set:function(v){ this.a = v-1 } } } }) vm.aPlus // =>2 vm.aPlug = 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){},         immediate：true     },     e:[      function handle1(val,oldVal){},      function handle2(val,oldVal){}     ],     // watch vm.e.f's value {: 5}     'e.f':function(val,oldValue){}  }复制代码

  }) vm.a = 2 // new : 2,old :1

注意，不应该使用剪头函数来定义watcher函数 （例如 searchQuery: newValue => this.updateAutocomplete(newValue)）。理由是剪头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.updateAutocomplete将是undefined

选项/DOM

选项/生命周期钩子

#beforeCreate

#created

#beforeMount

#mounted

#beforeUpdate

#updated

#activated

#deactived

#beforeDestory

#destory

#errorCaptured

选项/资源

选项/组合

选项/其他

实例属性

实例方法/ 数据

实例方法/ 事件

实例方法/ 生命周期

指令

特殊特性

内置的组件

VNode 接口

服务端渲染