Vue动态组件component、动态缓存组件keep-alive、过渡效果transition、过滤器filter、插槽solt

动态组件

---

• component
• component是Vue的动态组件，它是可以改变的

 <div id="app">
    <select name="" id="" v-model = "val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
    <component :is = "val"></component>
  </div>

 Vue.component('Father',{
    template: '
 father 
'
  })
  Vue.component('Son',{
    template: '
 son 
'
  })
  new Vue({
    el: '#app',
    data: {
      val: 'father'
    }
  })

动态缓存组件

---

• keep-alive
• keep-alive组件可以实现组件的动态缓存，让组件的切换能够更快
• keep-alive组件专用【在服务器渲染期间被调用】
  • activated：表示激活，正在显示的
  • deactived：表示keep-alive被停用

new Vue({
    el: '#app',
    data: {
      val: 'Father'
    },
    activated () {
      /* !keep-alive组件专用 */
      console.log('inactived')
    },
    deactivated () {
      /* !keep-alive组件专用 */
      console.log("兵哥: deactivated -> deactivated")
    }
  })

• include绑定的是谁，谁就是动态组件，值必须与组件名匹配
  • 值可以是字符串或者正则表达式，只有名称匹配的组件才会被缓存

 <keep-alive :include = "val">
    <component :is = "val"></component>
   </keep-alive>

Vue.component('Father',{
    template: '
 father 
',
    activated () {
      /* !keep-alive组件专用 */
      console.log('father-activated')
    },
  })

过渡效果

---

• transition过渡组件
• 建议借助animate.css使用
• 使用transition包裹过渡元素，会自动添加6个类名8个钩子函数
  • 动画 ：
    • 进入：enter-active-class = ' animated XXX'
    • 离开：leave-active-class = ' animated XXX'
    • mode：
      • out-in：当前元素进行过渡，完成之后新元素过渡进入
      • in-out：新元素进行过渡，完成之后当前元素过渡离开

过滤器

---

• 作用：格式化已有数据
• 使用格式：

  • 已有数据 | 过滤器名称( arg1,arg2 )

    <img 
         :src = "item.img | imgFilter "
         onerror="this.style.visibility='hidden'"
         >
    

  • | -->管道符

• 定义
  • 全局定义
    • Vue.filter
  • 局部定义
    • filters选项 全局定义

    •   Vue.filter('imgFilter',function ( val ) { //val就是需要格式化的数据
        		 console.log('val',val)
        	 	 return val.replace( 'w.h', '128.180') //
        	 })
      

插槽

---

• slot
• 插槽：给组件的内容预留一个空间
• 概念：
  • Vue实现了一套内容分发的API，这套API基于当前的WebComponents规范草案，将 元素作为承载分发的出口
  • 简单地来说，加入父组件需要在子组件内放置一些DOM，那些DOM的显示与否，在哪里显示，以及如何显示，都是slot内容分发负责。
• 插槽分类
  • 普通插槽
  • 具名插槽：有时候需要定义多个插槽
    • 给slot加一个name属性
• 作用域插槽

  • 可以让本只能在组件的模板中使用的数据，应用的组件的内容中去：

    <div id="app">
        <Hello>
          <template v-slot:default = "scope">
            <p> {{ scope.money }} </p>
          </template>
        </Hello>
      </div>
      <template id="hello">
        <div>
          <slot :money = "money"></slot>
        </div>
      </template>
    

    Vue.component('Hello',{
        template: '#hello',
        data () {
          return {
            money: 100000
          }
        }
      })
      new Vue({
        el: '#app'
      })