• 第四十篇 Vue封装swiper组件(v-swiper指令) 3.0

             在前面讲到 Vue组件的封装不知道还记不记得，这里就不在过多的赘述，这里附上链接跳转可以进行回顾翻阅，上一篇内容​​​​​​​讲到这个自定义的指令，也就是为这篇封装swiper组件使用指令做铺垫的，那么也一同附在这里：

            第三十七篇 Vue中封装Swiper组件

            第三十八篇 Vue中封装Swiper组件 2.0

            第三十九篇 自定义指令 - directive

    自定义指令 - v-swiper

            在这之前封装swiper组件所遇到的问题就是swiper什么时候开始进行初始化的问题，不是初始化过早，就是会被重复执行，所以需要知道到底在什么时机来对swiper进行初始化？上一篇内容讲到自定义指令当中我们知道自定义指令其实就是操作底层DOM，但目的并不一定是非要去操作DOM，虽然大多时候需要去操作DOM需求其实并不多，但是有时候需要知道的是DOM在什么时候会被刚刚创建完；封装swiper组件时我们就是在寻找DOM在什么时候会被创建出来，swiper好进行初始化内容，这样一来就不会造成具有初始化过早之类的问题，那么指令当中有一个指令生命周期inserted，当绑定该指令的标签插入父节点的时候就会触发；下面先来一段代码：

    1. <div id="app">
    2.     <div class="swiper-container mySwiper">
    3.         <div class="swiper-wrapper">
    4.             <div class="swiper-slide" v-for="item in swiperList" :key="index">
    5.                 <img :src="item" alt="">
    6.             div>
    7.             <div class="swiper-pagination">div>
    8.         div>
    9.     div>
    10. div>
    11. <script>
    12.     new Vue({
    13.         el:'#app',
    14.         data:{
    15.             swiperList:[]
    16.         },
    17.         mounted(){
    18.                  // 假设请求回来的数据赋值给swiperList
    19.                 this.swiperList = [ 
    20.                     'ImageOne' ,
    21.                      'ImageTwo' ,
    22.                       'ImageThree' ]; 
    23.  
    24.                 // new Swiper(".author")
    25.  
    26.             },2000)
    27.         }
    28.     })
    29. script>

            通过之前内容的学习能够知道Swiper在请求数据完成做初始化并不能够让swiper轮播起来，即初始化过早，需要知道DOM什么时候创建，这段数据会在DOM创建完插入父节点当中再进行初始化才能轮播；

             下面来编写v-swiper自定义指令，在控制台上了解指令绑定的标签插入父节点的过程：

    1. <div id="app">
    2.     ...
    3.     <div class="swiper-slide" v-for="item in swiperList" :key="item" v-swiper>
    4.          <img :src="item" alt="">
    5.     div>
    6.     ...
    7. div>
    8. <script>
    9.     Vue.directive("swiper",{
    10.         inserted(el){
    11.             console.log(el);
    12.         }
    13.     })

             当绑有 v-swiper 指令的标签插入父节点当中，会打印原生DOM节点；

             那么知道这个时机不就可以做swiper初始化的内容，那么能直接讲new Swiper的内容移到inserted当中吗？测试一下：

    1. 编写代码：

    1.