Vue從甜小白到皮大佬系列(四) 自定義指令

閱讀時間預估:3分鐘 html

啥是指令?

Vue從甜小白到皮大佬系列(二) v-指令前端

指令的鉤子函數參數vue

啥是自定義指令?

在前端開發領域,之前的通用框架是jQuery,jQuery以及基於jQuery構建的通用組件造成了一個龐大的生產系統。如今的通用框架是Angular、React和Vue,每一個框架都須要基於自身構建新的組件庫,自定義指令好就好在:原先的那些通用組件,不管是純js的也好,基於jQuery的也好,均可以拿來主義直接吸取,而不須要改造或重構,自定義指令能夠很方便的將大量重複的事情經過一個簡短的指令來實現.node

  • 做用:進行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>
複製代碼

※建議用以下方法來組織全局組件git

  • 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>
複製代碼

看完這篇不知道面前的這位大俠是否真正學會了自定義指令,本身動手寫一個全局的指令以及局部指令,全局指令必定要單獨放一個文件夾中管理哦😆加油,前端甜小白....github

若是個人分享對面前的這位大俠有所啓發,不要吝嗇以程序員最高禮遇點贊✨ 評論加分享的方式鼓勵我.express

關注公衆號回覆:學習 領取前端最新最全學習資料,也能夠進羣和大佬一塊兒學習交流.bash

猛戳 個人前端進階Blog
相關文章
相關標籤/搜索