Vue的全局API
一、全局API:(1)Vue.directive自定义指令定义函数提供了几个钩子函数(生命周期)(可选):bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新
文章目录
一、全局API:
(1)Vue.directive
三个参数
-
el: 指令所绑定的元素,可以用来直接操作DOM。
-
binding: 一个对象,包含指令的很多信息。
-
vnode: Vue编译生成的虚拟节点。
自定义指令定义函数提供了几个钩子函数(生命周期)(可选):
-
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
-
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
-
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
-
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
-
unbind: 只调用一次, 指令与元素解绑时调用。
Vue.directive()的用法和实例
(2)Vue.use
参数:插件
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
(3)Vue.extend
参数:组件对象
构建一个虚拟的组件(组件构造器)挂载到指定的元素上(用于子组件很小且事件不多的情况)
使用基础 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')
(4)Vue.set
用于实例创建之后可设置值
- 参数1: 要修改的对象
- 参数2: 属性
- 参数3: 属性的值是啥
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如
this.myObject.newProperty = 'hi'
)
返回值:设置的值
(5)Vue.mixin
参数:混入对象
全局混入
全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
(6)Vue.filter
参数1:字符串的id
参数2:定义函数
注册或获取全局过滤器。
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
(7)Vue.component
参数1:字符串的id
参数2:定义函数
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
(8)Vue.delete
在 2.2.0+ 中同样支持在数组上工作。
仅在 2.2.0+ 版本中支持 Array + index 用法。
- 参数1: 要修改的对象
- 参数2: 属性
删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制,但是你应该很少会使用它。
目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
(9)Vue.nextTick
参数1:回调函数
参数2:
在下次 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.nextTick()方法的使用详解(简单明了)
(10)Vue.compile
(11)Vue.observable
(12)Vue.version
更多推荐
所有评论(0)