关于vue.js:vue内置的组件

component
transition
transition-group
keep-alive
slot

props：is、inline-template
能够依据数据动静渲染组件
具体见上一章节的 is 属性

包裹一个元素或动静组件 ，实现 过渡 的成果
一般元素示例

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello world</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {show: true,};
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;}
.fade-enter,
.fade-leave-to {opacity: 0;}
</style>

在扭转 v-if 的值的时候并没有 立刻删除 元素，这是因为当插入或删除蕴含在 transition 组件中的元素，Vue 将会做以下解决

判断元素是否利用了 CSS过渡或动画，在失当的机会增加 / 删除CSS 类名
如果过渡组件提供了 钩子函数，这些钩子函数将在失当的机会被调用
如果没有上述的两个条件，DOM 操作在下一帧 立刻执行

name：主动生成 CSS 过渡类名
appear：是否在初始渲染时应用过渡
css：是否应用 css 过渡类
type：指定过渡事件的类型，侦听过渡何时完结，transition | animation
mode：管制来到 / 进入过渡的工夫序列，out-in | in-out
duration：指定过渡的持续时间，number|{enter:number,leave:number}

仅应用 js 过渡的元素增加 v -bind:css=”false”，跳过 CSS 的检测，防止过渡过程中 CSS 的影响

v取决于 transition 的 name 属性

v-enter: 进入过渡的 开始 状态

在元素被 插入之前 失效，在元素被 插入之后 的下一帧移除

v-enter-active：进入过渡 失效 时的状态

元素被 插入之前 失效，在 过渡 / 动画实现之后 移除。能够定义过渡的过程工夫，提早和曲线函数

v-enter-to：进入过渡的 完结 状态

元素被 插入之后 下一帧失效 (移除 v -enter)，在 过渡 / 动画实现 后移除

v-leave：来到过渡的 开始 状态

来到过渡被触发时立即失效，下一帧移除

v-leave-active：来到过渡的 失效 时的状态

来到过渡被触发时立即失效，在过渡 / 动画实现之后移除。能够定义来到过渡的过程工夫，提早和曲线函数

v-leave-to：来到过渡的 完结 状态

来到过渡被触发之后下一帧失效(移除 v -leave)，在过渡 / 动画实现之后移除

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

enter 和 leave 中必须应用 done 进行回调

其余无关 Vue 过渡的介绍见官网
过渡 & 动画

多组件过渡
属性：

tag：指定标签，默认为 span
move-class：笼罩挪动过渡期间利用的 CSS 类
除了 mode，其余与 transition 雷同

事件与 transition 雷同
具体介绍见官网动画 & 过渡

包裹动静组件，会缓存不流动的组件实例，不销毁
属性

include：String|RegExp，缓存指定的组件
exclude：String|RegExp，回绝缓存指定的组件
max：number，最多能够缓存多少组件实例

// 子组件一
<template>
  <div>One</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
};
</script>
// 子组件二
<template>
  <div>Two</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
};
</script>
// 父组件
<template>
  <div id="app">
    <button :value="component" @click="component ='One'"> 组件一 </button>
    <button :value="component" @click="component ='Two'"> 组件二 </button>
    <component :is="component"></component>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {One: () => import("./components/One.vue"),
    Two: () => import("./components/Two.vue"),
  },
  data() {
    return {component: "One",};
  },
  methods: {},};
</script>

在不增加 keep-alive 时，切换组件时会间接 销毁 转出的组件

// 父组件
<keep-alive>
  <component :is="component"></component>
</keep-alive>
// 子组件一
<template>
  <div>One</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
  activated() {console.log("进入 One");
  },
  deactivated() {console.log("来到 One");
  },
};
</script>
// 子组件二同上

应用 keep-alive 会多两个生命周期钩子
activated：当切换回组件时调用
deactivated：当切换出组件时调用

作为组件模板之中的内容散发 插槽
属性

name：命名插槽
绑定值：作用域插槽

vm.$slots 和 vm.$scopedSlots 属性
v-slot 指令
插槽(默认，具名，作用域)

关于vue.js:vue内置的组件

内置的组件

1 component

2 transition

2.1 transition 的属性

2.2 过渡的类名

2.3 钩子函数

3 transition-group

4 keep-alive

5 slot