Vue day6

插槽
slot占位符，其代表了组件中不同的结构，直接在子组件中使用这个标签就行
<slot></slot>
然后再父组件中写内容就行，

<template id="news">
      <div>
        我是News页面<Commonsontitle><span slot="two">嘻嘻想看</span></Commonsontitle
        >
      </div>
    </template>

如果一个子组件结构有多个不一样，可以给solt加个name属性

 <slot name="one"></slot>
<h1>我是公共子组件</h1>
<slot name="two"></slot>

然后再父组件中这样使用

<span slot="two">2bi</span                        //只要命名，顺序反了也没事
          ><span slot="one">花枝招展</span>

如果不命名的话，则写slot占位符的子组件结构都会调用

切换动效
元素在使用v-if（v-show）控制元素消失显示切换太过生硬，可以使用transition组件来让其平滑的切换

<transition name="one">
       <myishome v-if="isshow"></myishome>
     </transition>

元素从消失到显示有两个状态
入场：
v-enter（元素的初始状态，一瞬间，常用）
v-enter-active（元素入场的过程，常用）
v-enter-to（元素入场过后）
离场：
v-leave（元素离场之前）
v-leave-active（元素出场的过程，常用）
v-leave-to（元素出场过后，常用） //tips：v代表占位符，代表transition的名字，css选择要加.
然后其可以再css里面定义样式

tips：transition只是用于控制单个组件（只能有一个根组件，比如li这种）的显示切换，或者使用v-if v-else的组件（只能同时显示一个），使用这种渲染时候，可以再transition添加mode属性来改变出场离场顺序，默认为同时，
其值有'in out'（先入场后出场，不推荐），'out in'(先出场后入场，推荐)

  <div id="app1">
      <button @click="isshow=!isshow">切换</button>
      <transition name="one" mode="out in">
        <myishome v-if="isshow"></myishome>
        <myisnews v-else="!isshow"></myisnews>
      </transition>
    </div>

动画
@keyframes

@keyframes move {                                            //定义入场动画
        0% {
          transform: translateX(500px);
        }
        25% {
          transform: translateX(250px);
        }
        75% {
          transform: translateY(250px);
        }
        100% {
          transform: translate(0, 0);
        }
      }
      @keyframes exit {                                      //定义出场动画
        0% { 
          transform: translate(0, 0);
        }
        25% {
          transform: translateY(250px);
        }
        75% {
          transform: translateX(250px);
        }
        100% {
          transform: translateX(500px);
        }
      }
          
      .one-enter-active {                                    使用入场动画
        animation: move linear 0.5s;
      }
      .one-leave-active {                                    使用出场动画
        animation: exit linear 0.5s;
      }

动画只要设置入场enter-active和leave-active因为其他状态其动画关键帧已经定义好了

animate.css动画库
官网

.one-enter-active {
       animation-name: backInDown 2s;
     }
     .one-leave-active {
       animation: backOutDown 2s;
     }

混入 mixin
为了提高代表复用性和可维护性，vue提供了混入mixin，其可以将多个组件的一些公共的数据方法计算属性等等写在里面，混入可以插在任意组件中（相当于sass的混入）

const mix = {                                                                  //定义混入
        data() {
          return {
            msg: "混入搅拌",
          };
        },
        methods: {
          mixup() {
            this.msg = this.msg.split("").reverse().join("");
            console.log(this.msg);
          },
        },
      };

const Commonhome = {
template: "#home",
mixins: [mix], //使用混入，其是一个数组，也就是说可以插入多个混入
data() {
return {
num1: 20,
msg: "我是自己的msg", //如果组件中有与混入同名的数据方法等等，以组件组件的为准
};
},
components: {
Commonsontitle,
},
};

自定义指令

全局指令
其指令定义对象也提供了几个钩子函数：
bind（只调用一次，指令第一次绑定到元素时候调用，此时绑定的元素已经变成真实dom，此时还没挂载到文档中）常用
inserted（指指令所绑定的dom插入到父节点时触发，此时不一定插入到文档中）
update（数据更新，当前组件的虚拟dom更新完成）常用
componentUpdated（数据更新，当前组件的虚拟dom及其子组件的虚拟dom更新完成）
unbind（指令和元素解绑时触发） 常用

虚拟dom加载顺序
自上而下（先加载父组件后加载子组件）
真实dom加载顺序
自下而上（先加载子节点后加载父节点）
tips：父组件和子组件的生命周期钩子函数触发顺序？
答：父组件的beforecreate=>父组件的Created=>父组件的beforemount=>子组件的beforecreate=>子组件的Created=>子组件的beforemount=>子组件的mounted=>父组件的mounted

Vue.directive("backtop", {              /定义全局指令
       bind(el, binding) {
         console.log(el, binding.value);
         window.onscroll = () => {
           let sctop =
             document.body.scrollTop || document.documentElement.scrollTop;
           if (sctop >= binding.value) {
             el.style.display = "block";
             el.onclick = () => {
               window.scrollTo(0, 0);
             };
           } else {
             el.style.display = "none";
           }
         };
       },
       unbind() {
         window.onscroll = null;
       },
     });




      <button v-backtop="500" v-if="isshow" id="backtop">回到顶部</button>      //使用全局指令

局部指令：

const Commonsontitle = {
       template: "#sontitle",
     };
     const Commonhome = {
       template: "#home",
       mixins: [mix],
       data() {
         return {
           num1: 20,
           msg: "我是自己的msg",
         };
       },
       components: {
         Commonsontitle,
       },
       directives: {                       //在directives里定义，局部指令只可在当前定义这个指令组件范围内使用     
         changecolor: {                     //指令名
           bind(el, binding) {
             el.style.color = binding.value;
           },
         },
       },
     };

过滤器 filter
全局过滤器
定义

Vue.filter("过滤器的名字", (val（使用过滤器的数据）, sign = "￥"（这里参数可以随便填）) => {
        return sign + val;                 //return什么最终数据就显示什么
      });

使用 <h2>{{num1|one}}</h2> {{变量|过滤器名}}
使用也可以传参
<h2>{{num1|two("美元")}}</h2>
其也可以串联使用
<h2>{{num1|one|two("美元")}}</h2>

局部过滤器

const Commonhome = {
       template: "#home",
       data() {
         return {
           num1: 20,
           msg: "我是自己的msg",
         };
       },
       filters: {                                     //定义filters属性
         one1(val, sign = "局部") {                    //定义和全局差不多，使用差不多，不过只能子定义filters属性的组件里使用
           return sign + val;
         },
       },
       components: {
         Commonsontitle,
       },
       directives: {
         changecolor: {
           bind(el, binding) {
             el.style.color = binding.value;
           },
         },
       },
     };