自己定义的vue指令

vue常用指令

vue有给我们提供固定的指令：
v-bind：绑定属性，可以简写为 : 也称为动态获取
v-text：只显示{{}} 里的内容
v-html：可以渲染标签 如<h1>{{}}</h1>
v-on：绑定事件 可以简写为 @
v-for：循环数组
v-model：双向绑定
v-show：给属性添加 display：true false
v-if v-else if v-else 常常用在一起 添加条件判断
v-clock：style里写[ v-clock] { display:none} 解决闪烁问题
v-pre 告诉vue不需要解析，没有插值表达式
v-once 告诉vue需要解析且只解析一次

自定义指令

实现一个与v-text 功能一样的自定义指令

<div id="app">
        <h1 v-mytext="msg"></h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('mytext',{
            bind:function(el,binding){
                el.innerText=binding.value
                console.log(binding)
            },
            update:function(el,binding){
                el.innerText=binding.value
            }
        })
        const app = new Vue({
            el: "#app",
            data: {
                msg:'hello'
            }
        })
    </script>

自定义指令用directive（）来写，它有两个参数，第一个参数为指令的名称，也就是上文的mytext；第二个参数是一个对象，也就是指令的配置，对象里边的都是键值对，键有固定的五种，分别是五种钩子函数，bind、inserted、update、componentUpdated、unbind、 值呢就是对应的处理函数。
指令的钩子函数会传入参数，分别是el binding vnode oldvnode 但是常用的就是el 和 binding

最基本的自定义指令就完成了。