• 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="idv-focus><br>
           Name:<input type="text" v-model="name"><br>
           <button type="button" @click="addv-color>添加</button>
           <transition-group tag="ul" name="fade"> // transition 与 事件结合
               <li v-for="(item,indexin 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'HelveticaArialsans-serif;
      -webkit-font-smoothingantialiased;
      -moz-osx-font-smoothinggrayscale;
      text-aligncenter;
      color#2c3e50;
      margin-top60px;
    }
    li{
      backgroundskyblue;
      width800px;
      /* height: 20px; */
      line-height20px;
      margin5px;
    }
    li:hover{
      background#f99;
    }
    .fade-enter,.fade-leave-to{
      opacity0;
      transformtranslateY(30px);
    }
    .fade-leave-active,.fade-enter-active{
       transition:1s;
    }
    .fade-move{
      transition2s;
    }
    li ul{
      displaynone;
    }
    /* .fade-leave-active{
      position: absolute;
    } */
    </style>
  • 相关阅读:
    jpa入门案例----使用jpa对数据库进行查询、删除、修改操作
    ssm详细流程和步骤
    Dubbo
    ssm运行BUG
    mybatis 入门
    Linux
    Redis
    maven
    三层架构 开发模式
    转发和重定向的区别
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13160598.html
Copyright © 2020-2023  润新知