可复用性和组件（一）

好好学习，天天向上。

自定义指令

全局自定义指令

 //全局自定义指令 调用directive函数
//自定义指令名称是hello
Vue.directive('hello',{
    //钩子函数
    bind(el,binding,vnode){
         console.log(1234)
        //操作真实dom
        el.style.color = "red"
    }
})

钩子函数

一个指令定义对象可以提供下面几个钩子函数。

• bind 只调用一次，指令第一次绑定的时候调用。
• inserted 被绑定元素插入父节点时调用
• update 所在组件的Vnode 更新时调用。
• componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind 只调用一次，指令与元素解绑时调用。

钩子函数参数

• el 指令所绑定的元素，可以用来直接操作 DOM。
• binding 一个对象，包含以下 property
  • name 指令名，不包括 v- 前缀。
  • value 指令的绑定值。
  • oldValue 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

局部自定义指令

下面例子是一个自定义指令 v-setcolor 改变元素颜色

 const app = new Vue({
    el:"#app",
    data:{
        
    },
    //局部自定义指令 setcolor
    directives:{
        //自定义的指令名称不能含有大写字母
        setcolor:{
            inserted(el,binding,vnode){
                console.log("haha")
                el.style.color = binding.value
               
            }
        },
        //获取焦点指令 v-focus
        focus:{
            inserted(el,binding,vnode,oldVnode){
                 el.focus()
            }
}
    }
})

然后再body里面使用定义的自定义指令

 <div id="app">
    <div v-setcolor="red" v-focus>
        111
    </div>
</div>