Vue入門-自定義指令
阿新 • • 發佈：2019-01-09
自定義指令
當需要對普通DOM元素進行底層操作時,可以考慮自定義指令來實現。
語法: Vue.directive(指令名,配置物件)。
當需要對普通DOM元素進行底層操作時,可以考慮自定義指令來實現。
語法: Vue.directive(指令名,配置物件)。
1.建立全域性指令 特點:可以在任意不同的例項物件掛載的範圍進行使用
Vue.directive('highlight', { bind(el, binding) { console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }, // 指令所繫結的值, 再次改變的時候, 才會觸發 update(el, binding){ console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; } });
2.建立區域性指令 特點:在指定的例項物件掛載範圍內使用
directives: { useless: { // 需要訪問該指令所繫結元素的父級,必須要在inserted鉤子中. bind(el, binding) { // 輸出的結果為:null console.log('bind:', el, el.parentElement); }, inserted(el, binding) { // 輸出的結果為:app標籤, 即對應的父級標籤 console.log('inserted:', el, el.parentElement); if (binding.value === true) { el.parentElement.removeChild(el); } } }, focus: { // 指令的定義 inserted: function (el) { el.focus() } } }
參考程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義指令</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app" style="width: 500px;margin: auto;border-bottom: 1px solid black"> <input type="text" v-focus> <h1 v-highlight="color">滑鼠移入該標籤時，標籤高亮顯示</h1> <button @click="color = 'pink'">改變color的值,滑鼠移入h1標籤檢視效果改變</button> <div v-useless="false"> <h3>娛樂頭條</h3> <p>二本畢業生簡歷直接被扔進垃圾箱</p> </div> </div> <div id="app2" style="width: 500px;margin: auto;border-bottom: 1px solid black"> <p v-highlight="'yellow'">滑鼠移入該標籤時，標籤高亮顯示</p> </div> <p v-highlight="'yellow'" style="width: 500px;margin: auto;">不在任何例項中,不能使用全域性指令,便不會有自定義指令的高亮效果</p> </body> </html> <script> /* *自定義指令 * 當需要對普通DOM元素進行底層操作時,可以考慮自定義指令來實現 * 語法: Vue.directive(指令名,配置物件); */ // 1.建立全域性指令(特點:可以在任意不同的例項物件掛載的範圍進行使用) Vue.directive('highlight', { bind(el, binding) { console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }, // 指令所繫結的值, 再次改變的時候, 才會觸發 update(el, binding){ console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; } }); // 注意:當bind和update中的操作一致時,而且不關心其他鉤子,便可以使用下面的簡寫方式 Vue.directive('highlight', function (el, binding) { // 寫在函式中的操作就相當於在bind和update中各寫了一次 // 注意:el為是使用該指令的標籤 console.log(el, binding); el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }); new Vue({ el: '#app', data: { color: 'green' }, methods: {}, // 註冊區域性指令 directives: { useless: { // 需要訪問該指令所繫結元素的父級,必須要在inserted鉤子中. bind(el, binding) { // 輸出的結果為:null console.log('bind:', el, el.parentElement); }, inserted(el, binding) { // 輸出的結果為:app標籤, 即對應的父級標籤 console.log('inserted:', el, el.parentElement); if (binding.value === true) { el.parentElement.removeChild(el); } } }, focus: { // 指令的定義 inserted: function (el) { el.focus() } } } }); new Vue({ el: '#app2', data: {}, methods: {} }); </script>
效果圖對比
