vue基础

• vue组件进阶
• 组件进阶 动态组件与keep-alive

•   	动态组件
    		可以让多个组件进行切换，同时只会显示一个组件
    		<component :is="is"></component>
  

•   		特征：显示某个组件，这个组件会创建，如果某个组件不显示了，这个组件会销毁
  

•   	keep-alive
    		可以让组件被缓存，不被销毁
    		<keep-alive><component></keep-alive>
    		注意：缓存组件不会执行 destroyed和beforeDestroy钩子函数
    		新钩子
    			activated:激活
    			deactivated: 失活
  

•   组件插槽
    	作用：可以允许组件的部分内容不写死
  

•   	默认插槽
    		<slot></slot>
    		<demo>内容</demo>
  

•   	具名插槽
    		<slot name="aa"></slot>
    		<demo><template #aa></template></demo>
    		<demo><template v-slot:aa></template></demo>
  

•   	作用域插槽
    		<slot money="100"></slot>
    		<template v-slot="{money}"></template>
  

•   自定义指令
  

•   	全局
    		Vue.directive(指令名, { inserted(){}, update(){} })
  

•   	局部
    		directives: {名字: {}}
  

•   	color指令
  

  tabBar案例

Vue.directive('color', {
   inserted(el, {value}) {
     el.style.color = value
  },

  update() {}
})