vue内置的标签(组件)
component:用于动态组件,查看博文vue学习之组件。
<component :is="componentId"></component>
transition:过渡和动画,查看官网文档进入/离开&列表过渡。
<!-- 简单元素 -->
<transition>
<div v-if="ok">toggled content</div>
</transition>
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>
Props:
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。
注意:<keep-alive>
要求被切换到的组件都有自己的名字,不论是通过组件的 name
选项还是局部/全局注册。
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
使用:注意,<keep-alive>
用在仅一个直属的子组件被开关的情形。如果在其中有 v-for
则不会工作。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive> <!-- 多个条件判断的子组件,要求只有一个子元素被渲染 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive> <!-- 和 `<transition>` 一起使用 -->
<transition>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</transition>
keep-alive标签属性
include and exclude:组件有条件地缓存,用逗号分隔字符串、正则表达式或一个数组来表示要匹配的组件名称。
匹配首先检查组件自身的 name
选项,如果 name
选项不可用,则匹配它的局部注册名称 (父组件 components
选项的键值)。匿名组件不能被匹配。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive> <!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive> <!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
max:最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
<keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例。
与缓存有关的生命周期钩子activated和deactivated
,参考博文:生命周期钩子
注意:activated 和 deactivated
将会在 <keep-alive>
树内的所有嵌套组件中触发。
<slot></slot>
vue内置的标签(组件)的更多相关文章
- VUE 内置的标签<keep-alive></keep-alive>作用
<keep-alive></keep-alive> 的作用是 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染组件
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- Vue 内置指令 && 自定义指令
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Django 内置模板标签和过滤器
一.内置模板标签 语法:{% %} autoescape : 是否转义,on或off作为参数,并确定自动转义是否在块内有效.该块以endautoescape结束 {% autoescape on % ...
- Laravel 5.3 使用内置的 Auth 组件实现多用户认证功能
https://blog.csdn.net/kevinbai_cn/article/details/54341779 概述 在开发中,我们经常会遇到多种类型的用户的认证问题,比如后台的管理员和前台的普 ...
- amazeui中内置的web组件有哪些且如何用
amazeui中内置的web组件有哪些且如何用 一.总结 一句话总结: 1.组件还是jquery.js+amazeui.js,和插件一样,准确的说是amazeui.css+jquery.js+amaz ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- vue内置组件 transition 和 keep-alive 使用
1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...
随机推荐
- 逆向学习-Upack的PE文见头分析
重叠文件头 MZ文件头与PE文件头重叠. offest 0 e_magic:magic number = 4D5A('MZ') offest 3C e_lfanew:File address of ...
- Cnario Player 接入视频采集卡采集外部音视频信号测试
测试产品 型号: TC-D56N1-30P采集卡 参数: 1* HDMI 1.4输入, PCIe 接口为PCI-Express x4(Gen2), 最高支持4096x2160@30Hz, 支持1920 ...
- Centos6.5 pppoe-server
[root@localhost network-scripts]# rpm -q rp-pppoepackage rp-pppoe is not installed ----------------- ...
- Centos7 安装gitLab
我这里使用的是centos 7 64bit,我试过centos 6也是可以的! 1. 安装依赖软件 yum -y install policycoreutils openssh-server open ...
- 代理与hook
参考:Java 动态代理 代理是什么 为什么需要代理呢?其实这个代理与日常生活中的“代理”,“中介”差不多:比如你想海淘买东西,总不可能亲自飞到国外去购物吧,这时候我们使用第三方海淘服务比如惠惠购物助 ...
- 制作OSGB数据索引
[干货]教你用.S3C文件制作OSGB数据索引 [干货]教你用.S3C文件制作OSGB数据索引_搜狐汽车_搜狐网 S3C是ContextCapture(原Smart 3D)的一种数据格式,.S3C格式 ...
- 【CF715E】Complete the Permutations 第一类斯特林数
题目大意 有两个排列 \(p,q\),其中有一些位置是空的. 你要补全这两个排列. 定义 \(s(p,q)\) 为 每次交换 \(p\) 中的两个数,让 \(p=q\) 的最小操作次数. 求 \(s( ...
- [Windows Server]Windows Server turn off screen auto-lock to fit scheduled tasks(Error Code :0x4F7) / 关闭Windows Server的自动锁定来解决计划任务0x4F7错误
1. 打开“运行”,输入“regedit” 并回车. 2. 找到以下注册表路径,将Attributes的值改为 2: (原为1 HKEY_LOCAL_MACHINE \SYSTEM \CurrentC ...
- <知识整理>树--堆及其应用
预备知识: 完全二叉树的定义:一个深度为k数的二叉树(设根节点的深度为1),若二叉树深度从1到k-1层都是满的,而第k层的节点都集中在左边(即第k层不存在两节点之间有空缺),那么此数就被叫做完全二叉树 ...
- django 2.接口之工作原理
1.创建应用程序有两种方法,第一种就是在新建项目的时候,在最初使的时填入应用程序名称,第二种就是进入目录下面,输入 python manage.py startapp appName 就会自动生成一个 ...