vue2 - 自定义指令

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

注意：指令中的this是window

 

函数式：

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

<div id="root">
  <li>{{num}}</li>
  <!--num*10-->
  <li v-big="num"></li>
</div>

<script>
  const vm=new Vue({
    el: "#root",
    data: {
      num: 10
    },
    directives: {
      //big函数何时会被调用？
      //1.指令与元素成功绑定时（一上来）
      //2.指令所在的模板被重新解析时。
      big(element,binding){
        console.log(binding);
        element.innerText=binding.value*10;
      }
    }
  })
</script>

 

对象式：

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

<div id="root">
  输入：<button @click="num++">num++</button>
  输出：<input type="text" v-focus-bind:value="num">
</div>

<script>
  const vm=new Vue({
    el: "#root",
    data: {
      num: 10
    },
    directives: {
      focusBind: {
        //指令与元素成功绑定时（一上来）
        bind(element,binding){
          element.value=binding.value;
        },
        //指令所在元素被插入页面时
        inserted(element,binding){
          element.focus();
        },
        //指令所在的模板被重新解析时
        update(element,binding){
          element.value=binding.value;
        }
      }
    }
  })
</script>

 

全局指令：

<script>
  Vue.directive('focusBind',{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
      
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
      
    },
    //指令所在的模板被重新解析时
    update(element,binding){
      
    }
  })
</script>

 

  Vue.directive('focusBind',function (element,binding){
    
  })