Vue 自定義元件directive使用總結

書院二層樓發表於2020-10-02
Vue元件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>自定義元件directive</title>
</head>
<body>
    <div id="test">

    </div>
    <script>
        /*
        1、一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：
        bind：只呼叫一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
        inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
        update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 。
        componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
        unbind：只呼叫一次，指令與元素解綁時呼叫。
        2、接下來我們來看一下鉤子函式的引數 (即 el、binding、vnode 和 oldVnode)。指令鉤子函式會被傳入以下引數：
        el：指令所繫結的元素，可以用來直接操作 DOM。
        binding：一個物件，包含以下 property：
            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 編譯生成的虛擬節點。
        oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
        */
        Vue.directive("focus",{
            bind(el,binding){
                console.log("bind");
            },
            inserted(el,binding){
                console.log("inserted");
                el.focus();
            }
        })
        Vue.component("ComponentA", {
            template:`
            <div>
                這是元件A
                <input type="text" v-focus></input>
            </div>`,
        });
        const app = new Vue({
            el:"#test",
            template:`
                <div>
                    <ComponentA></ComponentA>
                </div>`,
            data:{},
        })
    </script>
</body>
</html>

效果截圖：（自動鎖定效果截圖不到，需要實際執行看）

相關文章