全书目录

第三篇：Vue 完全指南 —— 新城区商业街宇宙

第十六章：Vue 的三个特色内置设施 —— 过渡、传送、缓存

1 分钟 100 字 第 86 / 962 个阅读单元

Vue 有几个很有“框架完成度”的内置组件。

#1. <Transition> —— 招牌切换动画
vue
<template>
  <button @click="show = !show">切换广告牌</button>

  <Transition name="fade">
    <p v-if="show">新店开业，欢迎光临</p>
  </Transition>
</template>
#2. <Teleport> —— 把弹窗送到中央广场
vue
<template>
  <button @click="open = true">打开招商弹窗</button>

  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>招商信息</p>
      <button @click="open = false">关闭</button>
    </div>
  </Teleport>
</template>
#3. <KeepAlive> —— 暂停营业但保留装修
vue
<template>
  <KeepAlive>
    <component :is="currentView" />
  </KeepAlive>
</template>