【Web前端】【VUE】VUE基础三 slot、生命周期、swiper、指令、过滤器

SLOT插槽 (内容分发)

单个slot

• 利用slot 灵活地动态添加界面展示数据
• 实现父子通信，将父组件的数据显示在slot中

<child>
  <div slot="a">aaa</div>
  <div slot="b">bb</div>
</child>
<swiper>
  <li v-for="data in datalist">
    {
  {data}}
  </li>
</swiper>

...

 Vue.component("swiper",{
   template:`<div>
      <ul>
       <slot></slot>
      </ul>
    </div>`
 })
 
...

new Vue({
 el:"#box",
 data:{
   datalist:["11111","22222","333333"]
 }
})

具名slot(具有名字的插槽)

• 混合父组件的内容与子组件自己的模板–>内容分发
• 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
• <slot name="a"></slot> 组件中设置slot插槽名字
• <div slot="a"> div显示名字为a的slot 内容

<child>
   <div slot="a">aaaaaaaaaaaa</div>
   <div slot="b">bbbbbbbbbbbb</div>
 </child>
 
...

 Vue.component("child",{
   template:`<div>
    <slot name="a"></slot>
      child
    <slot name="b"></slot>  
    </div>`
 })

过渡效果（动画）

• Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
• 不是代替cs3动画，而是cs3的一种解决方案，自动切换移出、代替class。
• <transition name="stylename"> 根据name去寻找样式

1. 单元素/组件过渡
   • css过渡
   • css动画
   • 结合animate.css动画库

• 普通方法：点击显示、隐藏

      <button @click="isShow=!isShow">click</button>

• 过渡效果

.kerwinfade-enter-active, .kerwinfade-leave-active {
  transition: all 1.5s;
}
.kerwinfade-enter, .kerwinfade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(100px);
}

 <transition name="kerwinfade">
   <div v-if="isShow">1111111111111</div>
 </transition>

• 过渡效果

  .kerwinbounce-enter-active {
    animation: bounce-in .5s;
  }
  .kerwinbounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }
...
<transition name="kerwinbounce">
  <div v-if="isShow">222222222</div>
</transition>

2. 多个元素过渡(设置key)
   • 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们key="1"
   • 否则 Vue 为了效率只会替换相同标签内部的内容。（diff算法相同的标签比较不会重新创建）
   • mode:in-out 先来后走&