10. vue-自定义事件

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>