vuejs keep-alive
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title> <!--
<script src="vue.js"></script>
--> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head>
<body> <div id="counter-event-example">
<keep-alive> <!-- 把切换出去的组件保存到内存中 -->
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>
</keep-alive>
</div> <script> // 外部注册组件
Vue.component('outside', { template: '<p>Welcome from outside!</p>',
data: function () {
return {
someChildProperty: true
}
}
}) // 内部自带组件
var vm = new Vue({
el: '#counter-event-example',
data: {
currentView: 'home'
},
components: {
home:{
template:'<div><span>home....</span><span> header </span></div>'
,
data: function () {
return {
someChildProperty: true
}
}
},
posts:{
template:'<span>posts....</span>',
data: function () {
return {
someChildProperty: true
}
}
},
archive:{
template:'<span>archive....</span>',
data: function () {
return {
someChildProperty: true
}
}
}
}
}) // 可以在 console 修改 vm.currentView='posts' 刷新视图 </script> </body>
</html>
vuejs keep-alive的更多相关文章
- TODO：搭建Laravel VueJS SemanticUI
TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...
- 一次页面从Jq到Vuejs+PartialView的迁徙
题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...
- 使用vuejs框架进行列表渲染
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...
- Vuejs学习笔记1
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...
- 【vuejs小项目——vuejs2.0版本】单页面搭建
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...
- 【vuejs小项目】一、脚手架搭建工作
一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...
- SQL Server 2012故障转移的looksalive check和is alive check
什么是looksalive check和is alive check SQL Server故障转移集群是建立在windows集群服务上的一种热备的高可用方案.在集群运行过程中,windows集群服务定 ...
- vuejs的动态过滤
想要通过vuejs动态过滤(这里动态指得是过滤的条件是动态变化的), 一直没找到好办法, 最蠢的办法当然是两个两个数组,一个作为原始副本数组 一个作为视图数组,这样当过滤条件变化的时候 动态拷贝原始数 ...
- 使用 v-cloak 防止页面加载时出现 vuejs 的变量名
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...
- vuejs里封装的和IOS,Android通信模块
项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...
随机推荐
- hdu 5335 Walk Out 搜索+贪心
Walk Out Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total S ...
- apiCloud中Frame框的操作，显示与隐藏Frame
Frame是一层一层的概念, 有的位于上层,有的位于下层. 1.加载菜单 2.加载页面层 3.首页拆分出内容层,这个时候内容层位于页面层的上方,当点击其他页面的时候,内容层遮挡住了他们 解决方案一 判 ...
- Laravel-HTTP-验证
Laravel-HTTP-验证 标签(空格分隔): php 第一种方式 **1 直接在controller里完成表单验证** **2 打印验证返回的错误信息 dd($errors)** 第二种方式 * ...
- Kettle的四大不同环境工具
不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...
- Kettle学习系列之Kettle能做什么？（三）
不多说,直接上干货! PDI(Kettle) 都能做什么? 可以说凡是有数据整合.转换.迁移的场景都可以使用PDI,他代替了完成数据转换任务的手工编码,降低了开发难度. 同时,我们可以在自己实际业务里 ...
- Django(part3)
URLConf:负责url到view的map,就是一个urls.py module,通常在project和app级别都要定义, #mysite/urls.py from django.conf.url ...
- Ubuntu系统下安装Eclipse
第一步:查看操作系统位数. 打开终端,输入file /sbin/init 可以看到笔者Ubuntu系统为32位,读者可以使用该命令获取自己机器上的操作系统位数. 这一步是最至关重要的一步,笔者机器处理 ...
- （转载） 据说年薪30万的Android程序员必须知道的
据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...
- C# 分隔字符串成为字符串数组的方法（保留分隔符）
要求如下: source string: mmmmmmynameismickeym separator: m result string []: {"m", "m&quo ...
- hiho1041 - 树，遍历
题目链接 给一棵树,给一个序列,问能不能按这个序列遍历这棵树,满足每条边最多经过两次. -------------------------------------------------------- ...