Vue.use(plugins) 注冊一個插件
例子:
import Vue from 'vue'
import Router from 'vue-router'
// 不要忘了調(diào)用此方法
Vue.use(VueRouter)
Vue.directive()創(chuàng)建或者獲取自定義指令
// 注冊(指令函數(shù))
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注冊 (指令函數(shù))
Vue.directive('my-directive', function () {
// 這里將會被 `bind` 和 `update` 調(diào)用
})
// getter,返回已注冊的指令
var myDirective = Vue.directive('my-directive')
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選):
-
bind
:只調(diào)用一次竭缝,指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。 -
inserted
:被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在驱入,但不一定已被插入文檔中)。 -
update
:所在組件的 VNode 更新時調(diào)用,但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變突照,也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 氧吐。 -
componentUpdated
:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用讹蘑。 -
unbind
:只調(diào)用一次,指令與元素解綁時調(diào)用筑舅。
鉤子函數(shù)的參數(shù) 有(el
座慰、binding
、vnode
和oldVnode
)翠拣。
組件內(nèi)局部添加:
export default {
name: 'FilterDemo',
/* 局部指令 */
directives:{
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
},
data () {
return {
}
}
}
Vue.filter() 注冊或者獲取全局的過濾器
用在v-bind或者{{}}插入值之后版仔,用 |
隔開
參數(shù):
{string} id
{Function} [definition]
定義過濾器有兩種方式,
(1) 全局過濾器误墓,我們可以直接在vue對象上使用filter方法注冊過濾器蛮粮,這種全局注冊的過濾器在任何一個組件內(nèi)都可以使用。
(2)組件內(nèi)部的過濾器优烧,注冊組件內(nèi)部過濾器則只能在當前組件內(nèi)使用蝉揍,接下來我們使用這兩種方式注冊過濾器函數(shù)。
例子:
//全局過濾器
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 {
}
}
}
//使用
<template>
<div id="app">
{{msg | formatString}}
{{student.name | formatString}}
<ChildComponent v-bind:message="msg | formatString"></ChildComponent>
</div>
</template>
Vue.nextTick([callback,context]) 在DOM更新之后調(diào)用回調(diào)函數(shù)
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)畦娄。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM弊仪。
參數(shù):
{Function} [callback]
{Object} [context]
例子:
//全局
Vue.nextTick(function () {
// DOM 更新了
})熙卡;
//組件內(nèi)部
export default {
name: 'App',
data(){
return {
msg: "啟動測試頁面啦啦啦",
student: {
name: 1,
age: 2,
}
}
},
mounted(){
this.msg="已經(jīng)更新完畢";
//也可以在methods方法里面添加
this.$nextTick(function(){
console.log("nextTick操作")
})
}
Vue.set(target, propertyName/index, value) 或者 this.$set(target, propertyName/index, value)
向響應(yīng)式數(shù)據(jù)添加一個屬性,并且保證該屬性也是響應(yīng)式的励饵,且能夠觸發(fā)視圖的更新驳癌。
export default {
name: 'App',
data(){
return {
msg: "啟動測試頁面啦啦啦",
student: {
name: 1,
age: 2,
}
}
},
mounted(){
this.$set(this.student, "sex","女");
}
}
Vue.delete( target, propertyName/index )
刪除一個對象的屬性,如果屬性是響應(yīng)式的役听,確保刪除屬性并且更新視圖
Vue.mixin()
混入 (mixin) 提供了一種非常靈活的方式颓鲜,來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項典予。當組件使用混入對象時甜滨,所有混入對象的選項將被“混合”進入該組件本身的選項。
Vue.compile(template)
參數(shù): template {string}
在 render 函數(shù)中編譯模板字符串瘤袖。只在獨立構(gòu)建時有效
Vue.observable( object )
讓一個對象可響應(yīng)衣摩。Vue 內(nèi)部會用它來處理 data
函數(shù)返回的對象。
返回的對象可以直接用于渲染函數(shù)和計算屬性內(nèi)捂敌,并且會在發(fā)生改變時觸發(fā)相應(yīng)的更新艾扮。也可以作為最小化的跨組件狀態(tài)存儲器既琴,用于簡單的場景:
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 中酌予,則會返回一個可響應(yīng)的代理磺箕,而對源對象直接進行修改仍然是不可響應(yīng)的。因此霎终,為了向前兼容滞磺,我們推薦始終操作使用 Vue.observable
返回的對象,而不是傳入源對象莱褒。