Vue-自定义指令

<label>
     Name: <input type="text" class="form-control" v-model="name" @keyup.f2 = "add">
</label>

<label>
     搜索名称关键字: <input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">
</label>

一、自定义全局按键修饰符

      Vue.config.keyCodes.f2 = 113;

二、使用 Vue.directive()定义全局的指令
其中：参数1——指令的名称，注意：在定义的时候，指令的名称前面，不需要加 v- 前缀
但是：在调用的时候，必须在指令名称前 加上 v- 前缀来进行调用
参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

        Vue.directive('focus',{
            bind:function(el){   //在内存中调用这个bind，所以它无法传递到页面中去
                               //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
                               //注意：在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS 对象
                               //在元素 刚绑定了指令的时候，还没有 插入到 DOM 中去，这时候，调用 focus方法没有作用
                               //因为，一个元素，只有插入DOM 之后，才能获取焦点
                // el.focus() 
            },
            inserted:function(el){  //这个inserted就是从内存转入页面的过程，因此这个事件（行为）可以渲染到页面中
                                     //inserted 表示元素插入到DOM 中的时候，会执行 inserted 函数【触发一次】
                el.focus() 
                // 和JS 行为有关的操作，最好在inserted 中去执行，防止 JS 不生效
            },
            updated:function(el){   //当VNode更新的时候，会执行updated，可能会触发多次
                
            }
        })

三、自定义指令改变字体颜色

        Vue.directive('color',{
            // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
            // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
            bind:function(el,binding){
                // el.style.color = 'red';
                // 和样式相关的操作，一般都可以在 bind 中执行

                // console.log(binding.value)    blue
                // console.log(binding.expression)   'blue'

                el.style.color = binding.value
            }
        })

四、自定义私有指令

<div id="app2">
    <p v-fontweight="1000" v-fontsize="'30px'">{{msg2 | dateFormat('')}}</p>
</div>

directives:{
     'fontweight':{
         bind:function(el,binding){
            el.style.fontWeight = binding.value
          }
      },


      // ** 这个 function 等同于 把 代码写到了 bind 和 update 中去
      'fontsize':function(el,binding){
          el.style.fontSize = parseInt(binding.value) + 'px'
       }
}