閱讀時間預估:3分鐘
啥是指令?
啥是自定義指令?
在前端開發領域，以前的通用框架是jQuery，jQuery以及基於jQuery構建的通用元件形成了一個龐大的生產系統。現在的通用框架是Angular、React和Vue，每個框架都需要基於自身構建新的元件庫,自定義指令好就好在：原先的那些通用元件，無論是純js的也好，基於jQuery的也好，都可以拿來主義直接吸收，而不需要改造或重構,自定義指令可以很方便的將大量重複的事情通過一個簡短的指令來實現.
- 作用：進行DOM操作
- 使用場景：對純 DOM 元素進行底層操作，比如：文字框獲得焦點
- 兩種指令：1 全域性指令 2 區域性指令
自定義全域性指令
- 作用:定義一個指令可以全域性通用
- 關鍵code: Vue.directive()
- 建議:最好是單獨建立一個檔案然後引入到main.js檔案中單獨管理
// 第一個引數：指令名稱
// 第二個引數：配置物件，指定指令的鉤子函式
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>
複製程式碼※建議用如下方法來組織全域性元件
- 1.首先建立一個
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";
}
});
}
複製程式碼- 2.在main.js檔案中引入
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')
複製程式碼- 3.在你想使用的地方直接呼叫你定義好的元件名,一定要加v-哦!
<template>
<div class="hello">
<p v-dColor="'red'"> 我是全域性定義的元件修改顏色值</p>
<p v-dFont="'50'"> 我是全域性定義的元件可以修改大小</p>
</div>
</template>
複製程式碼自定義區域性指令
- 作用:定義一個指令,只能區域性元件使用
- 使用場景:元件中經常重用的某些操作Dom的方法,僅在在這一個元件中使用
- 關鍵code鉤子: directives: 寫一個區域性指令,定義一個input自動焦點的指令
<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>
複製程式碼看完這篇不知道面前的這位大俠是否真正學會了自定義指令,自己動手寫一個全域性的指令以及區域性指令,全域性指令一定要單獨放一個資料夾中管理哦?加油,前端甜小白....
如果我的分享對面前的這位大俠有所啟發,不要吝嗇以程式設計師最高禮遇點贊✨ 評論加分享的方式鼓勵我.
關注公眾號回覆:學習 領取前端最新最全學習資料,也可以進群和大佬一起學習交流.