第三十九篇 自定义指令 - directive

         前面讲了关于在Vue中如何来进行封装swiper组件的内容，本篇内容讲到使自定义组件，讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容，那么什么是自定义指令，在前面的内容讲过了好些常用的指令，如 v-modle、v-bind、v-show、v-if、v-for、v-else等等相关的指令来说就已经基本够用，而为什么出现自定义指令只再一些情况之下需要对DOM元素进行底层操作，那么就能够将其封装在指令当中，这样一来在使用的话就看不到对DOM元素进行底层操作，说到底自定义指令的目的就是为了对DOM元素进行底层操作；将底层操作封装到指令当中，其实是能够达到复用效果。下面来进行一个对自定义指令的学习使用：

全局自定义指令 - directive使用

 通过一个简单的例子来演示：

<div id="app">
    <div v-msg>
        温馨提示
    div>
div>
<script>
    // 自定义指令 "v-msg"
    Vue.directive("msg",{
        // 指令生命周期之一 inserted
        inserted(el){
            console.log("绑定当前指令的标签插入父节点就会执行",el)
        }
    })
    new Vue({
        el:'#app',
        
    })
script>

        编写自定义指令"v-msg"，inserted是指令的生命周期之一，前面讲到的是组件的八个生命周期，inserted是什么呢？就是 v-msg 绑定的标签插入到DOM节点上就会执行 inserted 指令生命周期，那么上面讲到使用自定义指令其实就是就是要操作底层的DOM，那么打印 inserted(el) 中的第一个参数，可以通过效果看到可以访问到原生的DOM，自定义指令的本意其实也是为了让你能够访问原生DOM，解决在某些特性情况下你需要对底层DOM的操作；

        下面来进行inserted时对绑定的内容做改变：当绑有 v-msg 指令插入父节点的时候它会出现一个边框的效果（1px solid black）；

        那么在之前使用的 v-if 、v-show 等的一些指令能够通过传一个属性来控制，那么自定义指令 v-msg 想通过传值来更改效果行不行呢？测试一下：

<div id="app">
    <div v-msg="red">温馨提示div>
div>

 控制台会出现报错：

[Vue warn]: Property or method "red" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 

        "red"未在实例上定义，通过初始化属性，确保此属性在 data 选项中或对于基于类的组件是反应性的。 

         那么在此需要知道一个问题，使用v-if,v-show的这些传值是当成一个变量来进行使用的，那么在此的 red 是通过字符串的形式，那么就该使用一个引号；使用 inserted 的第二个参数 binding ，也即是绑定的内容，下面来看一下：

"app">
    <div v-msg=" 'red' ">温馨提示div>