Vue 自定义指令（Day17）

函数

自定义函数指令调用时机：

1. 指令与元素成功绑定时
2. 指令所在模板被重新解析时

局部

    <div id="app">
        <!-- 需求一：定义一个v-big指令，和v-text功能相似，会把绑定的数值放大10倍 -->
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大十倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点击n+1</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      var vm = new Vue({
        el: "#app",
        data: {
            n:1,
        },
        directives:{ 
           big(element,binding){
            element.innerText=binding.value*10;
           } 
        }
      });
    </script>

全局

      Vue.directive("big", function (element, binding) {
        element.innerText = binding.value * 10;
      });

对象

基础原理

    <button id="btn">创建输入框</button>
    <script>
        const btn=document.getElementById('btn');
        btn.onclick=()=>{
           const input=document.createElement('input');
           document.body.appendChild(input);
           input.focus();
        }
    </script>

实现（局部）

    <div id="app">
        <!-- 需求二：定义一个v-fbind指令，功能和v-bind相似，可让其所绑定的input元素默认获取焦点 -->
        <input type="text" v-fbind="n">
    </div>
    <script>
      Vue.config.productionTip = false;
      var vm = new Vue({
        el: "#app",
        data: {
            n:1,
        },
        directives:{ 
           fbind:{
            bind(element,binding){
                element.value=binding.value;
            },
            inserted(element,binding){
                element.focus();
            },
            update(element,binding){
                element.value=binding.value;
            }
           }
        }
      });
    </script>

全局

      Vue.directive("fbind", {
        bind(element, binding) {
          element.value = binding.value;
        },
        inserted(element, binding) {
          element.focus();
        },
        update(element, binding) {
          element.value = binding.value;
        },
      });

总结

1、定义语法

1.1局部指令

new Vue({
	directives:{指令名:配置对象}
})
//或者
new Vue({
	directives{指令名:回调函数}
})

1.2全局指令

Vue.directive(指令名,配置对象)
//或者
Vue.directive(指令名,回调函数)

2、配置对象中常用的三个回调

1. bind ：指令与元素成功绑定时调用
2. inserted ： 指令所在元素被插入页面时
3. update ： 指令所在模板被重新解析时

3、备注

1. 指令名定义时不加**“v-”**
2. 指令名若为多个单词，使用kebab-case 方法命名，不用驼峰命名