vue内置组件 transition 和 keep-alive 使用
1.transition
name
- string,用于自动生成 CSS 过渡类名。例如:name: 'fade'
将自动拓展为.fade-enter
,.fade-enter-active
等。默认类名为 "v"
<transition>
元素作为单个元素/组件的过渡效果。<transition>
只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在检测过的组件层级中。
Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果。一般两类情况一个是利用CSS过渡或者动画,另一个是利用JavaScript钩子函数。
!-- 首先将要过渡的元素用transition包裹,并设置过渡的name,然后添加触发这个元素过渡的按钮(实际项目中不一定是按钮,任何能触发过渡组件的DOM操作的操作都可以) -->
<div>
<button @click="show=!show">show</button>
<transition name="fade">
<p v-show="show">hello</p>
</transition>
</div>
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s ease
&.fade-enter, &.fade-leave-active
opacity: 0
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。当然还可以设置其他的CSS属性
2.keep-alive
能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行。
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
// 组件
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive" //这句不能漏掉
}
}
}
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive> <keep-alive include="a,b">
<!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
结合router使用
这一段通常放在vue项目最外层的app.vue中 为了使所有组件都能很好的利用 这个是否需要缓存特性
//需要缓存时
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要缓存时
<router-view v-if="!$route.meta.keepAlive"></router-view>
//两组同时启用,只要在路由meta元信息中 对keepAlive定义,就能自主控制是否需要缓存
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
vue内置组件 transition 和 keep-alive 使用的更多相关文章
- vue内置组件——transition简单原理图文详解
基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡 ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- vue-learning:33 - component - 内置组件 - 过渡组件transition
vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- vue第十一单元(内置组件)
第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...
- 阅读vue源码-----内置组件篇(keep-alive)
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
- vue-learning:34 - component - 内置组件 - 缓存组件keep-alive
vue内置缓存组件keep-alive <keep-alive>标签内包裹的组件切换时会缓存组件实例,而不是销毁它们.避免多次加载相应的组件,减少性能消耗.并且当组件在 <keep- ...
随机推荐
- JS的判断字符/元素是否存在数组列表
python有in操作, 可以很方便的用于判断元素是否存在指定列表. JS的in操作是对象, 用于判断指定的属性在指定对象中是否存在. propNameOrNumber in objectName i ...
- ajax参数
$.ajax({ type: "GET", url: "Login.ashx", dataType: "text", cache: fals ...
- SqlServer-RBAC五表权限
这只是一个精简的SqlServer-RBAC五表权限,根据自身需求修改即可 --创建数据库-权限CREATE DATABASE RBACGOUSE RBACGO --1.权限表CREATE TABLE ...
- 洗礼灵魂,修炼python(65)--爬虫篇—BeautifulSoup:“忘掉正则表达式吧,我拉车养你”
前面解析了正则表达式,其实内容还挺多的对吧?确实挺适用的,不仅是python,其他语言或者web前端后端基本都要掌握正则表达式知识,但是你说,这么多,要完全的掌握,灵活运用的话,得搞多久啊?并且如果一 ...
- python字符串处理以及字符串格式化
一.python字符串处理 目录: 1.算长度(len),某个元素出现的次数(count) 2.切片 [ ],repr:把不可见字符显示出来 3.查找 #find,rfind从右边查找 4.字符串 ...
- 使用concurrent.futures模块中的线程池与进程池
使用concurrent.futures模块中的线程池与进程池 线程池与进程池 以线程池举例,系统使用多线程方式运行时,会产生大量的线程创建与销毁,创建与销毁必定会带来一定的消耗,甚至导致系统资源的崩 ...
- 排序算法之选择排序的思想以及Java实现
1 基本思想 选择排序的思想是,每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完. 2,算法的实现(Java) package Algorit ...
- Docker 从入门到实践(二)Docker 三个基本概念
一.Docker 的三个进本概念? 了解 Docker 的三个基本概念,就可以大致了解 Docker 的生命周期. 镜像(Image) 容器(Container) 仓库(Repository) 二.镜 ...
- 上传--spring-boot
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-f ...
- Announcing the Updated NGINX and NGINX Plus Plug‑In for New Relic (Version 2)
In March, 2013 we released the first version of the “nginx web server” plug‑in for New Relic monitor ...