vue学习笔记《三》

vue 进阶,
1. slot 插槽(内容分发)
    a.单个slot
    b. 具名slot （<slot name="a"></slot> 模板中调用<div slot="a">xxx</div>）
        * 混合父组件的内容与子组件自己的模板 --> 内容分发
        * 父组件模板的内容在父组件作用域内编译，子组件模板的内容在子组件作用域内编译

2.transition 过渡
 Vue 在插入，更新或者移除dom 时，提供多种不同方式的应用过渡效果
    1） 单元素/组件过滤
        css过渡
        css动画
        结合animate.css动画库
    2） 多个元素过渡（设置key）
        当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记让Vue区分它们，否则Vue为了效率智慧替换相同标签内部的内容
        mode:in-out（先来在走）;out-in（先走在来）
    3)  多个组件过滤
    4） 列表过渡（设置key）
        <transition-group> 不同于transiion ，他会以一个真实元素呈现，默认为一个<span>，niye
        可以通过tag特性更换为其他元素
        提供唯一的key属性值

    
3.组件生命周期
    只执行一次
    beforeCreate()： 初始化时组件
    created():创建组件
    beforeMount(): 组件挂载之前
    mounted()：组件挂载结束后调用 访问dom，setInterval，window，onscroll，监听事件 ajax
    //可执行无数次
    beforeUpdate():  // 更新执行
    updated(): 更新之后可以访问dom
    //只执行一次 销毁
    beforDestroy(): // destroyed clearInterval ,window.onscroll=null,$off
    destroyed() // destroyed clearInterval ,window.onscroll=null,$off

4. 过滤器 通过|调用过滤器
   <img :src="data.img | path">
   //定义过滤器
    Vue.filter("path",function(data){
        return data.replace("w.h","128.180");
    })

5. swiper，一个成熟的滑动组件，封装了各种样式的滑动效果。使用简单
    学习：https://www.swiper.com.cn/
     引入swiper.js
    模板：
  <div class="swiper-container a">
                <div class="swiper-wrapper">
                    <!-- 动态 -->
                    <div class="swiper-slide" v-for="(data,index) in datalist">
                        {{data}}
                    </div>
                    
                </div>
                <!-- 如果需要分页器 -->
               <div class="swiper-pagination"></div>
            </div>

     updated(){
                // 异步加载完成，需在dom节点创建完成之后才能初始化Swiper
                new Swiper(".a",{
                        // direction:'vertical',
                        loop:true,
                        //如果需要分页器
                        pagination:{
                            el:"swiper-pagination"
                        }
                    })
      }

      .swiper-container{
            width: 600px;
            height: 300px;
        } 
        .swiper-slide img{
            width:100%;
        } 
    自定义组件的封装
    自定义封装swiper组件(基于swiper)
    注意：防止swiper初始化过早 
     <div id="dome1">
            <!-- 给swiper组件定义key值，防止值更新时，Swiper频繁的创建 -->
            <swiper :key="datalist.length">
              <!-- 动态 -->
                <div class="swiper-slide" v-for="(data,index) in datalist">
                    {{data}}
                </div>
            </swiper>
        </div>

         Vue.component("swiper",{
           template:`
                   <div class="swiper-container a">
                        <div class="swiper-wrapper">  
                            <slot></slot>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
           `,
           mounted(){
                 new Swiper(".a",{
                        // direction:'vertical',
                        loop:true,
                        //如果需要分页器
                        pagination:{
                            el:".swiper-pagination"
                        }
                })
           }
       })
       var vm = new Vue({
            el: '#dome1',
            data:{
                datalist:[]
            },
            methods:{
              
            },
            mounted(){
                setTimeout(()=>{
                   this.datalist = ["111","222","333"]
                },2000)
            },
        })

          .swiper-container{
            width: 600px;
            height: 300px;
        } 
        .swiper-slide img{
            width:100%;
        } 


6.指令 自定义指令
  1，自定义指令介绍 directives
  2. 钩子函数
      * 参数 el，binding， vnode（vnode.context）
      * bind,inserted,updated,componentUpdated, unbind




    vue使用diff 算法 只对比连个标签是否相同，相同了只替换它的值，标签不相同，它认为是个新的东西，它会将其整体删了重新创建