Vue 知识点：自定义指令

自定义指令-函数式：

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

//容器
<div id="root">
	<h2>当前的数值是：<span v-text="n"></span></h2>
	<h2>放大10倍后的数值是：<span v-big="n"></span></h2>
	<button @click="n++"></button>
</div>

<script>
new Vue({
    el:"#root",
    data:{
        n:1,
    },
    directives:{
       `big函数何时会被调用：
           1.指令与元素成功绑定时。
           2.指令所在的模版被重新解析时。`
       big(element,binding){
           console.log("big")
           element.innerText = binding.value * 10
       }
    }
})
</script>

---

自定义指令-对象式：

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

//容器
<div id="root">
     <input type="text" v-fbind:value="n"/>
     <button @click="n++"></button>
</div>

<script>
new Vue({
    el:"#root",
    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>

自定义指令-总结：

1.关于自定义指令出现多个单词时，用“-”线分隔，但是在命名方法时，记得加上引号，不能使用简写形式：

示例如下：
v-bigNumber（no） v-big-number（yes）
v-big-number(element,binding)（no）  'v-big-number'(element,binding)（yes）

2.所有directives里的方法所指向的this都是window
3.directives里的指令怎么变成全局指令

<script>
//定义全局指令(函数式)
Vue.directive('big',function(element,binding){
    console.log("big")
    element.innerText = binding.value * 10
})

//定义全局指令(对象式)
Vue.directive('fbind',{
     `指令与元素成功绑定时`
     bind(element,binding){
         element.value = binding.value
     },
     `指令所在元素被插入页面时`
     inserted(element,binding){
         element.focus()
     },
     `指令所在的模版被重新解析时`
     update(element,binding){
         element.value = binding.value
     }
})
new Vue({
    el:"#root",
    data:{
        n:1,
    },
    //定义局部指令
    directives:{
        //函数式
        big(element,binding){
           console.log("big")
           element.innerText = binding.value * 10
        }
        //对象式
	    fbind:{
	         `指令与元素成功绑定时`
	          bind(element,binding){
	              element.value = binding.value
	          },
	          `指令所在元素被插入页面时`
	          inserted(element,binding){
	              element.focus()
	          },
	          `指令所在的模版被重新解析时`
	          update(element,binding){
	              element.value = binding.value
	          }
	    }
    }
})
</script>