2、API介绍之全局相关12个
前言：
官方api文档介绍：https://cn.vuejs.org/v2/api/
api就像武功招式，总得知道有多少式，手打一遍，哪怕不能烂熟于胸，哪怕只是形似，没有神似。
总计90个API接口
全局配置API有9个，全局API有12个,
数据API:6个,其它:6个，特殊特性:6个
生命周期：11个
实例相关的：属性13个+数据3个+生命周期4个+事件4个
资源相关的3个，DOM相关的有4个，组合4个，内置组件5个
全局配置API有9个
全局API有12个：
1、Vue.extend( 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>
2、Vue.nextTick( [callback, context] ) 下一步标记
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
3、Vue.set( target, propertyName/index, value )
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
4、Vue.delete( target, propertyName/index )
删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。
在 2.2.0+ 中同样支持在数组上工作。
目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
5、Vue.directive( id, [definition] ) 注册或获取全局指令
例如自定义指令，让输入框自动获取焦点
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 注册一个局部的自定义指令 `v-focus`,组件中也接受一个 directives 的选项：
Vue.directive('focus', {
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>
6、Vue.filter( id, [definition] )过滤器
在创建 Vue 实例之前全局定义过滤器：首字母大写
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)//过滤首字母大写
})
new Vue({
// ...
})
使用
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)//首字母大写
}
}
7、Vue.component( id, [definition] )注册或获取全局组件
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
//也可以传入一个可选的选项对象：
Vue.use(MyPlugin, { someOption: true })全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
在 render 函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
11、Vue.observable( 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 返回的对象，而不是传入源对象。
12、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
}
浙公网安备 33010602011771号