Vue自定义指令

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令的格式：在自定义指令上，前面的还是指令的名称，但名称后面跟的是一个对象，对象中有几个属性，属性后面跟的是函数

Vue.directive("指令名称"，{
    参数列表中，第一个参数永远是 el，表示被绑定指令的那个元素
  bind:function(el){
    当指令绑定到的元素，被vue实例解析的时候，就会立即执行 bind 函数 bind：只调用一次，指令第一次绑定到元素时调用
  },
  inserted(el){
      被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
  }   
})

举例，让input文本框自动获取焦点

首先在页面上有个文本框

<div id="app">
            <!-- 调用自定义指令 -->
        <input type="text" v-focus>
    </div>

在自定义一个指令 focus，在这里注意：Vue自定义指令的名称中，不需要写v-前缀，但是在调用自定义指令时必须加上v-前缀

 Vue.directive("focus",{
            bind:function(el){
            // API方法，获取焦点
                 el.focus() 
            },
            inserted(el){ 
            }
        })

这时候去查看结果：

是没有获得焦点的，如果想让文本获得焦点，那么文本必须先插入到文档中才能生效

所以：今后，如果自定义指令需要操作元素的 js 行为，最好写到 inserted 中

        如果需要操作元素的样式，写到bind中

所以我们这样写：

 Vue.directive("focus",{
            bind:function(el){

            },
            inserted(el){ 
                el.focus();
            }
        })

这时候查看结果：