1. 自定义指令

 vue中指令 分类：基础指令（内置指令） + 自定义指令（vue指令分：核心功能默认内置的指令 和自定义指令。）

 自定义指令：自己设置指令让其 起到一定的功能（作用）。

  自定义指令 分类： 全局自定义指令 和 局部自定义指令。

 Vue内置指令：v-text、v-html、v-bind 、v-on、v-model、v-model、v-show、v-if、v-else、v-else-if、v-for、v-pre、v-cloak、v-once

 自定义指令：有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

2. 自定义指令的作用

   内置指令不能满足我们特殊的需求

   Vue允许我们自定义指令  

3. Vue.directive注册全局自定义指令

自定义指令：使用 Vue.directive(id,definition) 注册全局自定义指令，使用组件的 directives选项 注册局部自定义指令。

Vue.directive(id,definition)注册全局自定义指令。

注意：V大写。

Vue.directive(id,definition)

传入的两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数。

directive指令，命令

definition定义

自定义指令中的 钩子函数：

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

全局自定义指令：在Vue实例外面，申明创建指令

    <div id="wrap">
        <div>
            <input type="text" name="" id="" v-focus>
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        // 创建 全局自定义指令
        // Vue.directive('指令id',对象),

        //v-focus 这个指令的作用： 页面初始化默认的情况下，让焦点 直接 落在文本框里！！
        // 初始化页面的时候，鼠标指针，自定落到文本框中
        Vue.directive('focus',{

            // 当绑定元素插入到 DOM 中。 其中 el为dom元素
            inserted:function(el){
                console.log(el)//只有在这个钩子函数里，能获取到dom节点，我才能对 dom节点进行一系列的相关操作！
                el.focus() //聚焦元素（或者 有的地方 叫 获取焦点）
            }
        })


        let vm = new Vue({
            // 模板选择器
            el:'#wrap',
            // 数据中心
            data:{
    
            },
            // 方法中心
            methods:{
    
            }
        })
    </script>

创建v-bgcolor 这个指令 其作用：页面初始化默认的情况下，我们希望 某个dom元素的背景颜色是 天蓝色,文字颜色是橙色

<div id="wrap">
        <div>
            <h3 v-bgcolor>四月，你好</h3>
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        // 创建 全局自定义指令
        // Vue.directive('指令id',对象),

        // v-bgcolor 这个指令的作用：页面初始化默认的情况下，我们希望 某个dom元素的背景颜色是 天蓝色,文字颜色是橙色
        Vue.directive('bgcolor',{
            // 当绑定元素插入到 DOM 中。 其中 el为dom元素
            inserted:function(el){
                el.style.color = 'orange';
                el.style.backgroundColor = 'skyblue';
            }
        })


        let vm = new Vue({
            // 模板选择器
            el:'#wrap',
            // 数据中心
            data:{
    
            },
            // 方法中心
            methods:{
    
            }
        })
    </script>

  创建v-bordercolor 这个指令 其作用：页面初始化默认的情况下，我们希望 某个dom元素的 边框 是 1px 实线 蓝色

<div id="wrap">
        <div>
            <label for="">用户名：</label>
            <input type="text" name="" id="" v-bordercolor >
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        // 创建 全局自定义指令
        // Vue.directive('指令id',对象),

        // v-bordercolor 这个指令的作用：页面初始化默认的情况下，我们希望 某个dom元素的 边框 是 1px 实线 蓝色
        Vue.directive('bordercolor',{
            inserted:function(el){
                el.style.border = "1px solid blue";
            }
        })

        let vm = new Vue({
            // 模板选择器
            el:'#wrap',
            // 数据中心
            data:{
    
            },
            // 方法中心
            methods:{
    
            }
        })
    </script>

注册局部自定义指令

局部指令，需要定义在  directives 的选项   用法和全局用法一样

局部指令只能在当前组件里面使用

当全局指令和局部指令同名时以局部指令为准

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
      //局部指令，需要定义在  directives 的选项
      // 局部自定义指令的指令名，可以写在 引号中， 也可以不写在 引号中
      directives: {
        'focus': {
          inserted: function(el) {
            el.focus();
          }
        },
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        }
      }
    });
  </script>

预览：