复习4

组件通讯之slot

在要封闭的组件内部通过slot实现：

例如：

 <div class="hd" ref="hd">
    <slot name="goBack"></slot>
    {{ title }}
    <slot name="logout"></slot>
</div>


调用时，在组件标签中间嵌入：通过 slot="名称"来嵌入

<div class="hd" ref="hd">
    <slot name="goBack"></slot>
    {{ title }}
    <slot name="logout"></slot>
</div>

总结：封装一个组件的三要素：要传递的参数，事件，slot

组件通讯是单向的数据流：

如何双向传递解决方案：

   第一种方案：父组组件往子级组件传递一个JS对象  【不推荐】
   第二种方案：利用sync和update事件触发来来向父级反馈更新的值

       第一步：在父级传递的子组件添加sync

         例如： <headCom :title.sync="t"></headCom>


       第二步：在子组件内部，通过$emit更新父组件传递过来的值

         例如： this.$emit('update:title',v)

           其中：update是一个关键字，固定写法，后面跟冒号（：），再后是你要更新的哪个属性，例如：title



    当然：表单中的v-model也是双向数据流、

计算属性：主要通过computed关键字实现

通过逻辑计算，得到的一个新值，这个新值是可以实时响应的
计算属性的优势：可以缓存数据

注意：watch

你说一下vue中 methods,computed,watch的区别？？？

$set:可以动态的给对象添加属性，并且实现响应

vue过滤器:即数据进行格式化处理

一、 创建Vue过滤器：

1.全局过滤器

  Vue.filter('过滤器名称',function(参数1,参数2,...) {

      //逻辑实现

  })

  注意：参数1：就是要格式化的那个数据，
        参数2：才是真正过滤器中传递的第3个参数
        参数3:才是真正过滤器中传递的第2个参数
        以此类推。。。。


  全局过滤器：可以在任意组件中使用
  

2.局部过滤器:

  通过filters只能在当前组件内部来使用

二、使用过滤器

{{ 要格式化的数据 | 过滤器名(参数1，参数2,...,参数n) }}

自定义指令:主要对经常使用的dom操作进行封装，方便复用

vue指令：

  vue内置指令：v-for,v-if,v-show,v-cloak,v-html......
  vue自定义指令：全局自定义指令，局部自定义指令

    第一种：全局自定义指令：
    
       Vue.directive('自定义指令名',{

             
       })

       例如：

       Vue.directive('focus',{
        inserted(el) {
            console.log('el:',el)
            el.focus();
        }
      });

    第二种：局部自自定指令：主要通过directives实现

转场动画:主要通过transition组件来实现动画效果

使用步骤：

  第一步：要给进行切换的区域添加一个transition组件，并且添加一个name名称，这个名称即为css类的前缀

    例如：

      <transition name="move">
          <router-view></router-view>
       </transition>

  第二步：给添加name的transition定义css3动画效果，例如：位移(tranform:translate())，淡入淡出(opaicty)

        设置动画：进入动画，离开动画

        1.进入动画：
        
           .name名称-enter {

            }
           .name名称-enter-active {


           }

           例如：
           .dh-enter {
              transform: translateX(-100%)
            }

  

        2.离开：

        .name名称-leave {


        }

        .name名称-leave-active {


        }

        例如：

        .dh-leave-active {
            transform: translateX(100%)
        }

        .dh-enter-active, .dh-leave-active {

            transition: transform .3s;
        
        }



animate.css和vue中的transition配合使用


说明：

      1.进入动画  enter-active-class="animated tada"  
      2.离开动画：leave-active-class="animated fadeInDown"

 <transition 
      name="move"
      enter-active-class="animated tada"
      leave-active-class="animated fadeInDown"
 >
   <router-view></router-view>
 </transition>


###  keep-alive:可以缓存组件内容在内存中

   <keep-alive include="home,cate">
     <router-view></router-view>
   </keep-alive>

 说明：

   include:表示只包含对应的组件才缓存
   exclude:表示排除要缓存的组件


   与keep-alive相关的钩子函数：

    activated:keep-alive 组件激活时调用
    deactivated:keep-alive 组件停用时调用

    注意：必须在使用keep-alive时才会激活activated和deactivated这两个钩子

    


nextTick