21自定义指令

自定义指令

需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 （函数式）
需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 （对象式）

函数式

需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

<div id="root">
    <h3>当前的n值是：{{n}}</h3>
    <h3>当前的n值是：<span v-big="n">{{n}}</span></h3>
    <button @click="n++">点我n+1</button>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            n:1,
        },
        directives:{
            //big函数何时会被调用? 1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
            big(element,binding){
                element.innerText=binding.value * 10
            },
        }
    });
</script>

对象式

需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<div id="root">
    <button @click="n++">n++</button>
    <input type="text" v-fbind:value="n">
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            n:1,
        },
        directives:{
            // 1.指令与元素成功绑定时(一上来)。2.指令所在元素被插入页面时。 3.指令所在模板被重新解析时
            fbind:{ 
                bind(element,binding){
                    // console.log(this,'bind')
                    element.value = binding.value;
                },
                inserted(element,binding){
                    // console.log(this,'inserted')
                    element.focus();
                },
                update(element,binding){
                    // console.log(this,'update')
                    element.value = binding.value;
                }
            },
        },
    });
</script>

ps：bind, inserted, update 都统称之为钩子。

通过document实现

<style>
    .demo{
        background-color:orange;
    }
</style>

<button id="btn">创建一个inout标签，并获取焦点</button>
<div id="root"></div>
<script>
    const btn = document.getElementById("btn");
    btn.onclick = () =>{
        // doc 创建一个input标签 （binding）
        let node = document.createElement("input");

        node.className = "demo"
        node.value = "Hello"
        node.onclick = () => console.log('node');
        // console.log(node.parentElement)     // null
        // node.parentElement.style.backgroundColor='skyblue'       // parentElement is null

        // 将 node 放入 html页面中（inserted）
        document.body.appendChild(node);
        node.parentElement.style.backgroundColor='skyblue'
    }
</script>

总结：自定义指令

自定义指令总结:
    一、定义语法:
        (1)。局部指令:
        new Vue({									new Vue({
        	directives:{指令名:配置对象}		或			directives{指令名:回调函数}
        })											})
        (2).全局指令:
            Vue.directive(指令名,配置对象） 或  Vue.directive(指令名,回调函数)
    二、配置对象中常用的3个回调:
        (1).bind: 指令与元素成功绑定时调用。
        (2).inserted: 指令所在元素被插入页面时调用。
        (3).update: 指令所在模板结构被重新解析时调用。
    三、备注:
        1.指令定义时不加v-, 但使用时要加v-;
        2.指令名如果是多个单词, 要使用kebab-case命名方式(-分割单词), 不要用camelCase命名(驼峰命名)。

1.bind 的过程(不通过当前的node获取相对数据)
    - style (样式)
    - tag   （标签）
    - event （事件）
2.inserted 的过程
    - 标签存在后的操作
    - ofcus（聚焦）
    - parentElement（层级标签）