1、对于vue来说，它有一个很强大得功能，就是指令系统
v-bind-->:
v-on-->@
v-if、v-for、v-model

2、自定义指令
通过自定义指令来完成对DOM得更多操作，并且可以在不同得场景下给我们提供很方便得操作
全局指令：放到任何一个组件中都可以使用（需要把全局指令放在入口文件中来设置，这样得话每一个组件中都可以进行使用了）
directive方法进行指令得声明，这个方法是vue上的
Vue.directive(指令名，实现得方式)
如果需要多个自定义指令直接使用directive方法即可
局部指令：只能在当前得vue实例中使用
directives：{
指令名：{
钩子函数： function(el){}
}
}
el:代表得也是当前操作对象

3、钩子函数：
inserted:只有有父节点得时候这个指令才能生效，
el：第一个参数，代表得是操作当前指令对象

4、钩子函数得参数：
el：第一个参数，代表得是操作当前指令对象
binding:绑定对象
name：指令名字
value：指令所绑定得值
oldValue：前一个值
expression：绑定得值是字符串
arg：给指令传的参数
modifiers：修饰对象得
vnode：编译生成得虚拟节点
oldVnode：上一个虚拟节点（只能在update和componentUpdated两个钩子函数中使用）

5、把常用得效果通过指令进行封装，用得时候直接通过指令名称进行调用就行了

 

<template>   <div id='app'>        ID:<input type="text" v-model="id" v-focus><br>        Name:<input type="text" v-model="name"><br>        <button type="button" @click="add" v-color>添加</button>        <transition-group tag="ul" name="fade"> // transition 与 事件结合            <li v-for="(item,index) in list" :key="item.id" @click="del(index)">               id:{{item.id}} ,name{{item.name}}            </li>        </transition-group>
       <!-- <div v-test-directive:xixi.a="msg"></div> -->         <div v-test-directive:xixi.a="{name:'lili'}"></div>
        <ul>           <li>首页</li>           <li v-dropDown>公司介绍             <ul>               <li>苹果</li>               <li>苹果</li>               <li>苹果</li>             </ul>           </li>           <li v-dropDown>公司介绍             <ul>               <li>苹果</li>               <li>苹果</li>               <li>苹果</li>             </ul>           </li>         </ul>            </div> </template>
<script> import $ from "jquery" export default {   name: 'App',   data(){     return {         id:'',         name:'',         list: [{id:1,name:'lili'},{id:2,name:'jurey'}],         msg:"我是msg",         show:false     }   },   methods: {      add() {        this.list.push({id:this.id,name:this.name})        this.id=''        this.name=''      },      del (i) {        this.list.splice(i,1)      }   },   directives :{     'color':{       inserted:function(el){         el.style.color='#0f0'       }     },     'test-directive':{       bind:function(el,binding){          el.innerHTML= "name:" + binding.name +"value:"+binding.value.name +'<br>'+          binding.expression+ '<br>'+'arg:'+binding.arg +'<br>'+JSON.stringify(binding.modifiers)       }     },     'dropDown' : {       inserted :function (el) {           function down(){              $(el).children('ul').slideDown()           }           function upp (){             $(el).children('ul').slideUp()           }           el.addEventListener('mouseenter',down)           el.addEventListener('mouseleave',upp)       }     }   }      
}
</script>
<style> #app{   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } li{   background: skyblue;   width: 800px;   /* height: 20px; */   line-height: 20px;   margin: 5px; } li:hover{   background: #f99; } .fade-enter,.fade-leave-to{   opacity: 0;   transform: translateY(30px); } .fade-leave-active,.fade-enter-active{    transition:1s; } .fade-move{   transition: 2s; } li ul{   display: none; } /* .fade-leave-active{   position: absolute; } */ </style>