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);
        },
    })