Vue的全局API

文章目录

  • 一、全局API:
    • (1)Vue.directive
    • (2)Vue.use
    • (3)Vue.extend
    • (4)Vue.set
    • (5)Vue.mixin
    • (6)Vue.filter
    • (7)Vue.component
    • (8)Vue.delete
    • (9)Vue.nextTick
    • (10)Vue.compile
    • (11)Vue.observable
    • (12)Vue.version

一、全局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: '

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

'
, 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

你可能感兴趣的:(大前端,Vue,vue)