vue怎么把api 挂载到全局_vue全局API和使用方法

  • Post author:
  • Post category:vue


Vue.use(plugins) 注册一个插件

例子:

import Vue from ‘vue’

import Router from ‘vue-router’

// 不要忘了调用此方法

Vue.use(VueRouter)

Vue.directive()创建或者获取自定义指令

// 注册(指令函数)

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’)

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

钩子函数的参数 有( el、binding、vnode 和 oldVnode)。

组件内局部添加:

export default {

name: ‘FilterDemo’,

/* 局部指令 */

directives:{

focus: {

// 指令的定义

inserted: function (el) {

el.focus()

}

}

},

data () {

return {

}

}

}

Vue.filter() 注册或者获取全局的过滤器

用在v-bind或者{

{}}插入值之后,用 |隔开

参数:

{string} id

{Function} [definition]

定义过滤器有两种方式,

(1) 全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。

(2)组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。

例子:

//全局过滤器

import Vue from ‘vue’;

Vue.filter(‘formatString’, function (value) {

var msg = value.length > 10 ? value.slice(0,3): value;

return msg;

});

//局部过滤器

export default {

name: ‘FilterDemo’,

/* 局部过滤器 */

filters:{

formatString: function(value){

var msg = value.length > 10 ? value.slice(0,3): value;

return msg;

}

},

data () {

return {

}

}

}

//使用

{

{msg | formatString}}

{

{student.name | formatString}}

Vue.nextTick([callback,context]) 在DOM更新之后调用回调函数

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

参数:

{Function} [callback]

{Object} [context]

例子:

//全局

Vue.nextTick(function () {

// DOM 更新了

});

//组件内部

export default {

name: ‘App’,

data(){

return {

msg: “启动测试页面啦啦啦”,

student: {

name: 1,

age: 2,

}

}

},

mounted(){

this.msg=”已经更新完毕”;

//也可以在methods方法里面添加

this.$nextTick(function(){

console.log(“nextTick操作”)

})

}

Vue.set(target, propertyName/index, value) 或者 this.$set(target, propertyName/index, value)

向响应式数据添加一个属性,并且保证该属性也是响应式的,且能够触发视图的更新。

export default {

name: ‘App’,

data(){

return {

msg: “启动测试页面啦啦啦”,

student: {

name: 1,

age: 2,

}

}

},

mounted(){

this.$set(this.student, “sex”,”女”);

}

}

Vue.delete( target, propertyName/index )

删除一个对象的属性,如果属性是响应式的,确保删除属性并且更新视图

Vue.mixin()

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

Vue.compile(template)

参数: template {string}

在 render 函数中编译模板字符串。只在独立构建时有效

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 返回的对象,而不是传入源对象。



版权声明:本文为weixin_39608116原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。