vue自定義全局和局部指令

時間 2019-11-11

標籤 vue 自定義全局局部指令简体版

原文原文鏈接

1、介紹html

　　一、除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也容許註冊自定義指令。前端

　　二、自定義指令的分類
　　一、全局指令vue

　　　　二、局部指令

　　三、自定義全局指令格式node

　　　　Vue.directive(指令ID,指令定義對象)

　　四、自定義局部指令格式express

　　　　略api

2、指令對象中的鉤子函數（一個指令定義對象能夠提供以下幾個鉤子函數）dom

　　一、bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。ide

　　二、inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。函數

　　三、update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 (詳細的鉤子函數參數見下)。this

　　四、componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。

　　五、unbind：只調用一次，指令與元素解綁時調用。

3、鉤子函數參數（指令鉤子函數會被傳入如下參數：）

　　一、el：指令所綁定的元素，能夠用來直接操做 DOM 。

　　二、binding：一個對象，包含如下屬性：

　　　　name：指令名，不包括 v- 前綴。

　　　　value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。

　　　　oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。

　　　　expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。

　　　　arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。

　　　　modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。

　　三、vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

　　四、oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

　　註釋：除了 el 以外，其它參數都應該是隻讀的，切勿進行修改。若是須要在鉤子之間共享數據，建議經過元素的 dataset 來進行。

4、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <!-- <h3 v-hello>{{msg}}</h3> -->
        <button @click="change">更新數據</button>

        <h3 v-world:wbs17022.hehe.haha="username">{{msg}}</h3>

        <!-- <p v-world>網博，專業的前端培訓</p> -->

        <!-- <h3 v-wbs>網博</h3> -->

        <input type="text" v-model="msg" v-focus>
    </div>

    <script>
        /**
         * 自定義全局指令
         * 注：使用指令時必須在指令名稱前加前綴v-，即v-指令名稱
         */
        Vue.directive('hello',{
            bind(){ //經常使用！！
                alert('指令第一次綁定到元素上時調用，只調用一次，可執行初始化操做');
            },
            inserted(){
                alert('被綁定元素插入到DOM中時調用');
            },
            update(){
                alert('被綁定元素所在模板更新時(前)調用');
            },
            componentUpdated(){
                alert('被綁定元素所在模板完成一次更新週期時調用');
            },
            unbind(){
                alert('指令與元素解綁時調用，只調用一次');
            }
        });
        //鉤子函數的參數
        Vue.directive('world',{
            bind(el,binding){
                // console.log(el，binding); //第一個參數表示指令所綁定的元素，是個dom對象，第二個參數是個對象
                // el.style.color='red';

                console.log(binding); //name
            }
        });
        //傳入一個簡單的函數，bind和update時都會調用
        Vue.directive('wbs',function(){
            alert('wbs17022');
        });


        var vm=new Vue({
            el:'#itany',
            data:{
                msg:'welcome to itany',
                username:'alice'
            },
            methods:{
                change(){
                    this.msg='歡迎來到南京網博'
                }
            },
            directives:{ //自定義局部指令
                focus:{
                    //當被綁定元素插入到DOM中時獲取焦點，其餘用法和自定義全局指令用法相同
                    inserted(el){
                        el.focus();//讓這個元素得到焦點
                    }
                }
            }
        });
    </script>
    
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。