vue学习（六）异步组件加载
异步组件加载
首先准备-----简单的框架搭出来
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>异步组件加载</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<App></App>
</div> <script>
const App={
data(){
return{
msg:'异步组件加载'
}
},
template:`<div>{{msg}}</div>`,
};
let app = new Vue({
el:'#app', template:``,
components:{
App
}
})
</script>
</body>
</html>
在新建一个Text.js文件
export default {
data() {
return {
msg: '小朋友'
}
},
template: `<div>{{msg}}</div>`,
}
总代码
1. 里面标签的改变
2.刚开始只有vue.js的加入 在点击之后 Text.js被加载
3.要用一个工厂函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>异步组件加载</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="../no2_组件/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body> <div id="app">
<App></App>
</div> <script type="module"> const App = {
data() {
return {
isShow:false
}
},
methods:{
asyncLoad(){
this.isShow = !this.isShow
}
},
template: `<div>
<button @click="asyncLoad">异步组件加载</button>
<Test v-if="isShow"></Test>
</div>`,
components: {
Test:()=>import('./Test.js') // 工厂函数 import导入
}
};
let app = new Vue({
el: '#app', template: ``,
components: {
App
}
})
</script>
</body>
</html>
vue学习（六）异步组件加载的更多相关文章
- vue 学习六 在组件上使用v-model
其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- YYWebImage——iOS异步图片加载框架
本文转载至 http://www.mobile-open.com/2015/86582.html YYWebImage 是一个异步图片加载框架 (YYKit 组件之一). 其设计目的是试图替代 S ...
- [技术博客]React-Native中的组件加载、卸载与setState问题
React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usu ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- javascript 异步模块加载 简易实现
在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...
随机推荐
- rar 配合 python 实现 excel密码保护 破解
基本流程为,将excel 格式 改为rar, 然后用rar软件打开, 将 xl -> worksheet -> sheet*.xml 做下修改, 把sheet*.xml 里面的密码保护字段 ...
- Python学习笔记001
二进制 换算: 十进制转二进制 除二取余,然后倒序排列,高位补零. 将正的十进制数除以二,得到的商再除以二,依次类推知道商为零或一时为止,然后在旁边标出各步的余数,最后倒着写出来,高位补零就可以. 二 ...
- updatexml()报错注入
首先了解下updatexml()函数 UPDATEXML (XML_document, XPath_string, new_value); 第一个参数:XML_document是String格式,为X ...
- MySQL复制(一)--复制概述
MySQL复制(replication)文档集合:1.复制概述2.基于二进制日志文件位置(binlog)配置复制3.基于全局事物标识符(GTID)配置复制4.多源复制5.级联复制6.半同步复制7.延迟 ...
- 「NOIP2013」华容道
传送门 Luogu 解题思路 预支一点东西: 这题其实有着更为思维的图模型,还十分考验码力,不简单啊 这居然是联赛题 讲正解: 显然我们对于一种合法方案,空格子肯定是一直围绕着特定棋子反复横跳的. 所 ...
- BugFix系列---开篇介绍
这个系列的文章,主要目的在于积累总结实际开发中遇到的错误,记录下来自己的解决思路,用来提升自己. 不出意外,应该会持续不断的记录更新,在整个开发openstack的过程中,抓住机会吸取开源界大牛的 ...
- 海康威视Web3.0控件个人开发经验及问题总结
最近在给公司平台写视频监控的页面需求,于是接触到了海康威视的视频控件,网上查阅一番资料后,发现有很多大佬们给出了简易的海康视频控件的上手方法,但是发现仍然有很多地方没有总结到,于是在这里对我个人对海康 ...
- 开源DDD设计模式框架YMNNetCoreFrameWork第一篇
DDD设计模式:仓储.领域模型.应用层.聚合根.事件总线,以业务模型驱动设计,从数据模型驱动脱离,不用关心数据库设计,开发效率更高 DDD领域驱动设计模型概念不再讲解,直接上技术 框架搭建: 如图所示 ...
- 实验吧-web-Once More(php ereg()漏洞)！！！
题目:啊拉?又是php审计.已经想吐了. hint:ereg()函数有漏洞哩:从小老师就说要用科学的方法来算数. 给我们提示:1)ereg()函数漏洞 2)科学计数法 viewsource: < ...
- Django（十三）状态保持 —— cookie与session+ajax异步请求+session记住登录状态+cookie记住登录名密码
一.状态保持的概述 http协议是无状态的.下一次去访问一个页面时并不知道上一次对这个页面做了什么.因此引入了cookie.session两种方式来配合解决此问题. Duplicate entry:重 ...