Vue中自定义指令directive的使用

知识预备：自定义指令中的钩子函数

• bind：只调用一次，指令第一次绑定到元素的时候调用 （一般在修改style时使用）
• inserted：被绑定的元素节点插入到dom树中时调用（一般在修改dom时使用）
• update：所在组件的Vnode更新时调用，但孩子Vnode可能还没有更新
• componentUpdate：所在组件的Vnode及孩子的Vnode全部更新时调用
• unbind：只调用一次，指令与元素解绑的时候调用

一般就用前两个就行了

知识预备：自定义指令中的钩子函数中的参数

//例子
bind:function(el,binding)

• el:指令绑定的对象，可以用来直接操作dom
• binding是一个对象

binding:{
 name:指令名
 value：指令绑定的值 参数值 "1+1"==>2
 expression：绑定值的字符串形式 "1+1"==>'1+1'
}

---

还有其他参数类型 不常用就不写了 到这里没看懂没关系 看后面的例子就明白了

---

1.自定义全局指令

声明：Vue.directive(‘name’,{bind:function(){}})

• 参数1：字符串 自定义指令的名称
• 参数2：对象 绑定的钩子函数

<script>
import Vue from 'vue'
Vue.directive('focus', {
  bind: function (el) {
    console.log('调用全局自定义指令----bind')
  },
  inserted: function (el) {
    el.focus()
    console.log('调用全局自定义指令----inserted')
  }
})
export default {
}
</script>

使用：在标签中写 v-指令的名字

      <div>调用全局自定义指令</div>
      <input type="text" v-model="keywords" v-focus>

---

2.自定义私有指令

声明：

<script>
export default {
  name: 'directivePage',
  directives: {
    'fontWeight': {
      bind: function (el) {
        el.style.fontWeight = 500
      }
    }
  },
  data () {
    return {
      keyword: ''
    }
  },
  methods: {}
}
</script>

调用：

 <div v-fontWeight>调用私有自定义指令</div>

---

3.自定义指令中传递参数

以自定义全局指令为例子
声明：

• 参数存在于binding对象中 见知识预备中

Vue.directive('color', {
  bind: function (el, binding) {
    el.style.color = binding.value
  }
})

调用：

• 传递参数以字符串的形式

<div v-color="'blue'">调用全局自定义指令color</div>

效果：

---

4.自定义指令的简写形式

大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心它的钩子函数时 即不想关心绑定哪个钩子函数

// 不想关心它的钩子函数可以采用简写的方式
Vue.directive('color', (el, binding) => {
  el.style.color = binding.value
})

---