自定義指令 · vue

# 指令鉤子函數 1. bind：只調用一次，指令第一次綁定到元素時調用（組件初始化時調用一次，順序1） 2. inserted：被綁定元素插入父節點時調用 (組件初始化時調用，順序2，僅保證父節點存在，但不一定已被插入文檔中)。 3. update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。（數據更新時調用，初始化時不調用）。 4. componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。 5. unbind：只調用一次，指令與元素解綁時調用。例如:vue的表格，頁面初始化時，調用bind和inserted，更新表格數據時調用update，如下判斷權限指令 ~~~ const has = { install (Vue) { // 注冊一個全局自定義指令 `v-has`,驗證是否有操作權限 Vue.directive('has', { bind (el, binding, vnode) { let codeArr = vnode.context.$store.state.app.permissionName if (!Array.isArray(codeArr) || !codeArr.length) { codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : [] } if (!codeArr.includes(binding.value)) { el.parentNode && el.parentNode.removeChild(el) } } }) Vue.directive('hasd', { inserted (el, binding, vnode) { let codeArr = vnode.context.$store.state.app.permissionName if (!Array.isArray(codeArr) || !codeArr.length) { codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : [] } if (!codeArr.includes(binding.value)) { el.parentNode && el.parentNode.removeChild(el) } }, update (el, binding, vnode) { let codeArr = vnode.context.$store.state.app.permissionName if (!Array.isArray(codeArr) || !codeArr.length) { codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : [] } if (!codeArr.includes(binding.value)) { el.parentNode && el.parentNode.removeChild(el) } } }) } } export default has ~~~ webpack 框架 App.vue ``` <template> <div class="container"> <div class="row"> <div class="col-xs-12"> <!-局部這側的組件-> <app-test v-if="btn" :text="text"></app-test> <button @click="create">加載</button> <button @click="update">更新</button> <button @click="destory">關閉</button> </div> </div> </div> </template> <script> export default { data() { return { btn:true, text:'hello', } }, components: { appTest: { // v-test 就是自定義指令具體在main.js中看 template: '<h1 v-test>{{text}}</h1>', props: { text: String } } }, methods: { //創建的方法 create(){ this.btn=true }, //更新組件內容 update(){ this.text='hi' }, //利用內部指令摧毀組件 destory(){ this.btn=false } }, } </script> ``` main.js ``` import Vue from 'vue' import App from './App.vue' //全局注冊自定義指令在每個鉤子函數輸出相應內容 //其中為了區分bind ,inserted 還相應輸出元素的父節點 //為了區本update,componentUpdated 還想贏輸出元素內容 Vue.directive('test', { bind: function (el) { console.log('bind'); console.log(el.parentNode) }, inserted: function (el) { console.log('inserted'); console.log(el.parentNode) }, update: function (el) { console.log('update')； console.log(el.innerHTML) }, componentUpdated: function (el) { console.log('componentUpdated') console.log(el.innerHTML) }, unbind: function (el) { console.log('unbind') } }) new Vue({ el: '#app', render: h => h(App) }) ``` OK 運行首先我們看到控制臺輸出加載 ``` bind null inserted <div class=?"col-xs-12">?…?</div>? ``` 這時候我們可以判斷首先加載時會經歷這bind和inserted兩個鉤子函數，分別對應第一次綁定，和父元素加載完畢按下更新按鈕 updata hello componentUpdated hi 這時候我們可以判斷節點內容更新時會經歷這兩個鉤子函數，分別對應更新前，和更新后按下關閉 unbind 1 階段銷毀時經歷unbind鉤子函數按下加載 bind null inserted <div class=?"col-xs-12">?…?</div>? 1 2 3 4 再次看下加載小貼士這時我們應該可以弄明白鉤子函數但其實大多數情況我們只希望節點在加載和更新時發生同樣的事情，而忽略其它鉤子函數,可以這么寫 Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) ———————————————— 版權聲明：本文為CSDN博主「leon_smart」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/leon_smart/article/details/88724524 ## 1. 自定義指令語法說明 1. **使用 Vue.directive(v1,v2) 定義全局的指令 v-focus** **參數1** ：指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴, 但是：在調用的時候，必須在指令名稱前加上 v- 前綴來進行調用 **參數2：** 是一個對象，這個對象身上，有一些指令相關的**函數**，這些函數可以在特定的階段，執行相關的操作 **2. 指令綁定函數** **通過directive(v1,v2)綁定指令對應的函數，在指令綁定元素的時候執行** * **bind: function (el){}** 每當指令綁定到元素上的時候，會立即執行這個 bind 函數，只執行一次注意：在每個函數中，第一個參數，永遠是 el ，表示被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象在元素剛綁定了指令的時候，還沒有插入到 DOM中去，這時候，**調用 focus 方法沒有作用因為，一個元素，只有插入DOM之后，才能獲取焦點** // el.focus()不會生效 * **inserted: function (el) {}** inserted 表示元素插入到DOM中的時候，會執行 inserted 函數【觸發1次】 el.focus() **// 和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效** }, * **updated: function (el) {}** // 當VNode更新的時候，會執行 updated，可能會觸發多次 } }) ## 2. 定義一個私有指令 1. 定義 ~~~ directives: { // 自定義私有指令 'fontweight': { // 設置字體粗細的 bind: function (el, binding) { el.style.fontWeight = binding.value } }, 'fontsize': function (el, binding) { // 注意：這個 function 等同于把代碼寫到了 bind 和 update 中去 el.style.fontSize = parseInt(binding.value) + 'px' } } }) ~~~ 2. 使用 v-指令綁定到元素 ~~~ <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'"> ~~~ ## 3. 定義全局指令 ~~~ // 自定義一個設置字體顏色的指令 Vue.directive('color', { // 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯的樣式 // 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素 bind: function (el, binding) { // el.style.color = 'red' // console.log(binding.name) // 和樣式相關的操作，一般都可以在 bind 執行 // console.log(binding.value) // console.log(binding.expression) el.style.color = binding.value } }) ~~~