Vue自定义指令

自定义指令

    除了默认设置的核心指令（v-model和v-show），Vue也支持自定义指令。注意，在Vue2.0里面，代码复用的主要形式和抽象是组件，然而,在有的情况下，你仍然需要对纯DOM元素进行底层操作，这时候就会用到自定义指令。

    我们可以创建一个全局的自定义指令或者一个局部的自定义指令 

    <div id="box">
        <!-- 自定义指令 -->
        <p v-hello>v-hello全局自定义指令</p>
    </div>

    /* 自定义全局指令,返回这个元素对象 */
    Vue.directive('hello',{
        inserted:function(el){
            console.log(el);
        },
    });

 

    1.钩子函数

        1.bind：只调用一次，指令第一次绑定到元素的时候调用，用这个钩子函数可以一个绑定一个调用时只执行一次的初始化动作。

        2.inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）

        3.update：所在组件v-node更新时调用，但是可能发生在其子节点vnode更新之前，指令的值可能发生了改变，也可能没有发生改变，但是可以通过比较跟新前后的值来忽略不必要的模板跟新

        4.componentupdated:所在组件的vnode和子vnode全部更新后调用。

        5.unbind：只调用一次，元素与指令解绑时调用。

　　比较常用的是update和inserted

　　

　　　　　<div id="box">
        　　<!-- 自定义指令的生命周期 -->
        　　<p v-hello2="color">v-hello2局补自定义指令</p>
　　　　　</div>

    var vm = new Vue({
        el:'#box',
        data:{
            color:'red',
        },//局部指令
        directives:{
            hello2:{
                 //binding表示元素属性hello中的值，这个指向vm.data中的color，但是在控制台的后台如果修改color的值，并不能让v-hello自定义指令获得信息，这里就是自定义指令的生命周期问题，inserted只在第一次渲染的时候,这里加入update就可以实现实时变更,inserted和update是最常用的。
                inserted:function(el,binding){
                    console.log(binding.value);
                    el.style.background = binding.value;
                },
                update:function(el,binding){
                    el.style.background = binding.value;
                }
            },
            
        }
    })

 

    2.钩子函数的参数

        1.el

        2.binding

        3.vnode

        4.oldnode

    3.函数的简写

　　　　<div od="box">
        　　<!-- 自定义指令的函数简写方式 -->
        　　<p v-hello3="obj">v-hello3全局自定义指令简写指令函数</p>
　　　　</div>

    //自定义指令的函数简写方式,如果指令需要多个值，可以传入javascript对象字面量，比如可以传入一个obj对象来传输多个值
    Vue.directive('hello3',function(el,binding){
        console.log(binding)
        el.style.background = binding.value.background;
        el.style.fontSize = binding.value.fontSize;
        }
    );
    var vm = new Vue({
        el:'#box',
        data:{
            obj:{
                'background':'yellow',
                'fontSize':'24px'
            },
        },
    })

 

    4.对象字面量

轮播

    inserted插入最后一个元素时调用（vnode.context.datalist.）

    this.$nextTik()

　　　　引入外部css文件   <link rel="stylesheet" href="../css/swiper.css"> 

　　　引入外部js文件  <script src="../js/swiper.js"></script> 

        *{margin: 0;padding: 0;}
        html,body{height: 100%;}
        /* 改变最外层容器的宽高 */
        .swiper-container{width: 600px;height: 600px;background: #555;}
        .swiper-slide{font-size: 30px;text-align: center;background: #111;color: white;}

    <div id="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- 因为指令是在DOM渲染完之后执行的，如果不加入指令，初始化swiper是没办法实现在DOM渲染完成前就实现功能的，但还需要再添加一个触发器，因为指令所指的DOM虽然创建完了，但还没有添加到父节点中， -->
                <div class="swiper-slide" v-for="(data,index) in datalist" v-swipe="index">
                    {{data}}
                </div>
            </div>
            <!-- 这里是分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    //指令轮播封装,vnode表示获取的是一个虚拟DOM v
    Vue.directive('swipe',function(el,binding,vnode){
        console.log(binding.value);
        if(binding.value == vnode.context.datalist.length - 1){
            console.log('最后一个DOM创建完毕');
            setTimeout(()=>{
                var swiper = new Swiper('.swiper-container', {
                //分页
                pagination: {
                    el: '.swiper-pagination',
                },
                
                //自动轮播
                autoplay: {
                    delay: 2500,//时间 毫秒
                    disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
                },
                loop:true,//循环 最后面一个往后面滑动会滑到第一个
            });
            },0)
        }
    });
    var vm = new Vue({
        el:'#box',
        data:{
            datalist:[],
        },
        //指令轮播，mounted何时调用呢,组件渲染到DOM节点上，挂载到DOM节点上，这个生命周期会调用，这个是用来模拟假装请求数据，这个请求是一个异步请求，这里做一个延时。
        mounted(){
            setTimeout(()=>{
                this.datalist = ['111','222','333'];
                
            },2000);
        },
    })