vue之keep-alive组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript" src="./vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var A = {
template: `
<div>我是AAAAAAA</div>
`,
created() {
console.log('A组件created');
},
mounted() {
console.log('A组件mounted');
},
destroyed() {
console.log('A组件被销毁了')
}
};
var B = {
template: `
<div>
<h3 @click = 'clickHandler'>我是BBBB</h3>
</div>
`,
methods: {
clickHandler(e) {
e.target.style.color = 'red';
}
},
created() {
console.log('B组件created');
},
mounted() {
console.log('B组件mounted');
},
destroyed() {
console.log('B组件被销毁了')
}
};
var router = new VueRouter({
routes: [{
path: '/a',
component: A
},
{
path: '/b',
component: B
},
]
});
var App = {
// 使用keep-alive
// template: `
// <div>
// <router-link to = '/a'>A</router-link>
// <router-link to = '/b'>B</router-link>
// <keep-alive>
// <router-view></router-view>
// </keep-alive>
// </div>
// `
// 不使用keep-alive
template: `
<div>
<router-link to = '/a'>A</router-link>
<router-link to = '/b'>B</router-link>
<router-view></router-view>
</div>
`
}
new Vue({
el: '#app',
template: `<App />`,
components: {
App
},
router
});
</script>
</body>
</html>
不使用keep-alive对路由组件缓存，AB来回切换打印结果如下
组件来回切换，会重新创建和销毁（A组件的销毁发生在B组件beforeMount和mounted之间）
使用keep-alive对路由组件缓存，AB来回切换打印结果如下
组件只会在第一次创建，随后来回切换不会发生销毁
vue之keep-alive组件的更多相关文章
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟组件快速入门（下篇）
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- 转： Vue.js——60分钟组件快速入门（上篇）
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- vue.js学习之组件（下篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
随机推荐
- SSH2中的笔记
1.web后端实质就是对表的添.删.查.改: 第一步:对系统进行分析,然后构思. 第二步:画出E-R图,设计出表或写出相应的实体类. 第三步:按照最简单的思想去设计的话,一个action-->一 ...
- JAVA SE——集合框架
1.首先根据业务场景选择哪种集合类型. set(无序,并且不包含重复元素),list(有序,并且允许重复元素),map(key-value,)
- 如何替换Ceph的Journal
很多人会提出这样的问题: 能不能够将 Ceph journal 分区从一个磁盘替换到另一个磁盘? 怎样替换 Ceph 的 journal 分区? 有两种方法来修改Ceph的journal: 创建一个j ...
- ceph集群的安装和配置教程
本篇主题: 1.怎样配置ssh免登陆访问 2.为什么搭建集群要关闭防火墙和selinux,如何关闭 3.从哪里获取ceph的安装包,怎样安装才是快速正确的 4.为什么要配置时间同步服务,怎样配置 5. ...
- scrapy学习之爬虫练习平台35
前言 上一篇文章中爬取了爬虫练习平台的所有 ssr 网站,都是比较简单的,没有反爬措施,这次来爬一下后面的 spa 系列. 环境准备 这里沿用了上篇文章的环境和设置,就不重新搭建环境了. 开始爬取 s ...
- Web安全常见漏洞修复建议
转载地址:https://security.pingan.com/blog/17.html SQL注入 在服务器端要对所有的输入数据验证有效性. 在处理输入之前,验证所有客户端提供的数据,包括所有的参 ...
- CF453C Little Pony and Summer Sun Celebration
如果一个点需要经过奇数次我们就称其为奇点,偶数次称其为偶点. 考虑不合法的情况,有任意两个奇点不连通(自己想想为什么). 那么需要处理的部分就是包含奇点的唯一一个连通块.先随意撸出一棵生成树,然后正常 ...
- JavaSE 学习笔记08丨网络编程
Chapter 14. 网络编程 14.1 计算机网络入门 当前节的知识点只是一个概述,更具体.详细的内容放在 计算机网络 中. 14.1.1 软件结构 C/S结构(Client/Server结构): ...
- 【操作系统】银行家算法实现（C语言）
[操作系统]银行家算法实现(C语言) 注意:本人编码水平很菜.算是自己的一个总结.可能会有我还没有发现的bug.如果有人发现后可以指出,不胜感激. 1.银行家算法: 我们可以把操作系统看作是银行家,操 ...
- sentinel降级误解
public void initDegradeRule(){ List<DegradeRule> rules=new ArrayList<>(); DegradeRule ru ...