【Vue】动态加载Html片段
在编写Vue页面的时候,会碰到这么一个需求。由于页面组件比较多,不可能一次性将所有的页面都打包,只能按需获取相应的页面进行显示。
比如有一个App页面,需要异步获取html片段通过v-html指令加载到content这个组件中。
- <div id='app'>
- <content v-html='html' />
- <input type='button' @click='appendContent' >appendContent</input>
- </div>
- <script type="text/x-template" id='content-template'>
- <div class='content' v-html='html'> </div>
- </script>
APP JS:
- var content = Vue.components('content',{
- props:['html'],
- template:'#content-template'
- });
- var app = new Vue({
- el:'#app',
- data:{
- html:''
- },
- methods:{
- appendContent:function() {
- $.ajax({
- type:'GET',
- url:'content.html'
- success:function(response){
- this.html = response;
- }
- });
- }
- }
- });
组件
- <div id='content'>
- <test1 />
- <test2 />
- </div>
- <script type="text/x-template" id='test1-template'>
- <div>Test 1 Component</div>
- </script>
- <script type="text/x-template" id='test2-template'>
- <div>Test 2 Component</div>
- </script>
- <script>
- var test1 = {
- template:'#test1-template'
- };
- var test2 = {
- template:'#test2-template'
- };
- var subcontent = new Vue({
- el:'#content',
- components:{
- 'test1':test1,
- 'test2':test2,
- }
- });
- </script>
但是实际执行的时候会发现,组件没能正确渲染。折腾了一通,发现原来v-html指令原来有个坑,插入片段的时候,js代码无法执行。
因此需要改变一下执行顺序。
- 1.将组件拆分成html和js两个文件。
- 2.先用ajax读取html文件。
- 3.成功获取html文件后,通过require获取js文件。
修改后的代码如下(注:只是示例,不代表能跑得通):
- 主界面 html
- <div id='app'>
- <content v-html='html' />
- <input type='button' @click='appendContent' >appendContent</input>
- </div>
- <script type="text/x-template" id='content-template'>
- <div class='content' v-html='html'> </div>
- </script>
- 主界面 js
- var content = Vue.components('content',{
- props:['html'],
- template:'#content-template'
- });
- var app = new Vue({
- el:'#app',
- data:{
- html:''
- },
- methods:{
- appendContent:function() {
- $.ajax({
- type:'GET',
- url:'content.html'
- success:function(response){
- this.html = response;
- require(['content'],function(){});
- }
- });
- }
- }
- });
- 组件 html
- <div id='content'>
- <test1 />
- <test2 />
- </div>
- <script type="text/x-template" id='test1-template'>
- <div>Test 1 Component</div>
- </script>
- <script type="text/x-template" id='test2-template'>
- <div>Test 2 Component</div>
- </script>
- 组件 js
- <script>
- var test1 = {
- template:'#test1-template'
- };
- var test2 = {
- template:'#test2-template'
- };
- var subcontent = new Vue({
- el:'#content',
- components:{
- 'test1':test1,
- 'test2':test2,
- }
- });
- </script>
【Vue】动态加载Html片段的更多相关文章
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...
随机推荐
- wqs二分
今天模拟赛有一道林克卡特树,完全没有思路 赛后想了一想,不就是求\(k+1\)条不相交的链,使其权值之和最大嘛,傻了. 有一个最裸的\(DP\),设\(f[i][j][k]\)表示在以\(i\)为根的 ...
- pytest 13 使用自定义标记mark
前言: pytest可以规定那些要跑,那些不跑,跑特定的哪些?比如以下的这个例子: #!/usr/bin/env/python # -*-coding:utf-8-*- import pytest @ ...
- jsp:include动作功能
jsp:plugin动作:连接客户端的Applet或Bean插件 jsp:useBean动作:应用javaBean组件 jsp:setProperty动作:设置javaBean属性 jsp:getPr ...
- Node的安装和进程管理
安装nvm git clone https://github.com/creationix/nvm.git source nvm/nvm.sh 安装node nvm install 6.14.4(版本 ...
- 最大似然估计与期望最大化(EM)算法
一.最大似然估计与最大后验概率 1.概率与统计 概率与统计是两个不同的概念. 概率是指:模型参数已知,X未知,p(x1) ... p(xn) 都是对应的xi的概率 统计是指:模型参数未知,X已知,根据 ...
- Abnormal Detection(异常检测)和 Supervised Learning(有监督训练)在异常检测上的应用初探
1. 异常检测 VS 监督学习 0x1:异常检测算法和监督学习算法的对比 总结来讲: . 在异常检测中,异常点是少之又少,大部分是正常样本,异常只是相对小概率事件 . 异常点的特征表现非常不集中,即异 ...
- CentOS7设置ssh服务以及端口修改
很多时候我们都是通过SSH 服务 来对 Linux 进行操作,而不是直接来操作Linux机器,包括对Linux服务器的操作,因此,设置SSH服务对于学习Linux来说属于必备技能(尤其是运维人员),关 ...
- springBoot和Mybatis输出sql日志
利用slf4j来输出日志. 首先需要版本兼容的slf4j-log4j12.log4j.slf4j-api.slf4j-nop.slf4j-simple这5个包. 可以去maven知识库中找到这5个包的 ...
- jdbcTemplate批量插入处理数据
最近有个需求,就是批量处理数据,但是并发量应该很大,当时第一时间想到得是mybatis的foreach去处理,但是后来通过查资料发现,相对有spring 的jdbcTemplate处理速度,mybat ...
- js关于“call方法”百度,阿里超难面试题
面试题:function fn(a,b){ console.log(this); console.log(a); console.log(a+b);}fn.call(1);fn.ca ...