閱讀時間預估:3分鐘
html
指令的鉤子函數參數vue
在前端開發領域,之前的通用框架是jQuery,jQuery以及基於jQuery構建的通用組件造成了一個龐大的生產系統。如今的通用框架是Angular、React和Vue,每一個框架都須要基於自身構建新的組件庫,自定義指令好就好在:原先的那些通用組件,不管是純js的也好,基於jQuery的也好,均可以拿來主義直接吸取,而不須要改造或重構,自定義指令能夠很方便的將大量重複的事情經過一個簡短的指令來實現.node
// 第一個參數:指令名稱
// 第二個參數:配置對象,指定指令的鉤子函數
Vue.directive('directiveName', {
// bind中只能對元素自身進行DOM操做,而沒法對父級元素操做
// 只調用一次 指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
bind( el,binding, vnode ) {
// 參數詳解
// el:指令所綁定的元素,能夠用來直接操做 DOM 。
// binding:一個對象,包含如下屬性:
// name:指令名,不包括 v- 前綴。
// value:指令的綁定值,等號後面的值 。
// oldValue:指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
// expression:字符串形式的指令表達式 等號後面的字符串 形式
// arg:傳給指令的參數,可選。例如 v-my-directive:foo 中,參數爲 "foo"。
// modifiers:指令修飾符。例如:v-directive.foo.bar中,修飾符對象爲 { foo: true, bar: true }。
// vnode:Vue 編譯生成的虛擬節點。。
// oldVnode:上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。
},
// inserted這個鉤子函數調用的時候,當前元素已經插入頁面中了,也就是說能夠獲取到父級節點了
inserted ( el,binding, vnode ) {},
// DOM從新渲染前
update(el,binding, vnode,oldVnode) {},
// DOM從新渲染後
componentUpdated ( el,binding, vnode,oldVnode ) {},
// 只調用一次,指令與元素解綁時調用
unbind ( el ) {
// 指令所在的元素在頁面中消失,觸發
}
})
// 簡寫 若是你想在 bind 和 update 時觸發相同行爲,而不關心其它的鉤子:
Vue.directive('自定義指令名', function( el, binding ) {})
// 例:
Vue.directive('color', function(el, binding) {
el.style.color = binging.value
})
// 使用 注意直接些會被i成data中的數據「red」 須要字符串則嵌套引號"'red'"
<p v-color="'red'"></p>
複製代碼
※建議用以下方法來組織全局組件git
directive.js
文件而後編寫全局的自定義組件.例如我想定義一個直接修改Dom顏色和文字大小的自定義組件export default (Vue) => {
Vue.directive('dColor', {
inserted: function (el, binding) {
el.style.color = binding.value;
}
});
Vue.directive('dFont', {
inserted: function (el, binding) {
el.style.fontSize = binding.value + "px";
}
});
}
複製代碼
directive.js
文件,並使用Vue.use(directive)調用她import Vue from 'vue';
import App from './App.vue';
import directive from './directive';
Vue.config.productionTip = false;
Vue.use(directive); //全局使用directive文件
new Vue({
render: h => h(App),
}).$mount('#app')
複製代碼
<template>
<div class="hello">
<p v-dColor="'red'"> 我是全局定義的組件修改顏色值</p>
<p v-dFont="'50'"> 我是全局定義的組件能夠修改大小</p>
</div>
</template>
複製代碼
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
directives: {
// 自定義組件的名字
autoFocus: {
// 鉤子函數,被綁定元素插入父節點時調用 (父節點存在便可調用,沒必要存在於 document 中)。
inserted (el) {
el.focus();
console.log('inserted');
},
// 只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。
bind () {
console.log('bind');
},
// 所在組件的 VNode 更新時調用,可是可能發生在其孩子的 VNode 更新以前。
// 指令的值可能發生了改變也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新
updata () {
console.log('updata');
},
// 所在組件的 VNode 及其孩子的 VNode 所有更新時調用。
componentUpdated () {
console.log('componentUpdated');
},
// 只調用一次,指令與元素解綁時調用。
unbind () {
console.log('unbind');
}
}
}
}
</script>
複製代碼
4.在須要使用的地方調用v-autoFocus直接使用程序員
<template>
<div class="hello">
<p v-dColor="'red'"> 我是全局定義的組件修改顏色值</p>
<p v-dFont="'50'"> 我是全局定義的組件能夠修改大小</p>
<input type="text"
placeholder="請輸入文字"
v-autoFocus>
</div>
</template>
複製代碼
看完這篇不知道面前的這位大俠是否真正學會了自定義指令,本身動手寫一個全局的指令以及局部指令,全局指令必定要單獨放一個文件夾中管理哦😆加油,前端甜小白....github
若是個人分享對面前的這位大俠有所啓發,不要吝嗇以程序員最高禮遇點贊✨ 評論加分享的方式鼓勵我.express
關注公衆號回覆:學習 領取前端最新最全學習資料,也能夠進羣和大佬一塊兒學習交流.bash
猛戳 個人前端進階Blog