在编写Vue页面的时候,会碰到这么一个需求。由于页面组件比较多,不可能一次性将所有的页面都打包,只能按需获取相应的页面进行显示。

比如有一个App页面,需要异步获取html片段通过v-html指令加载到content这个组件中。

  1. <div id='app'>
  2. <content v-html='html' />
  3. <input type='button' @click='appendContent' >appendContent</input>
  4. </div>
  5.  
  6. <script type="text/x-template" id='content-template'>
  7. <div class='content' v-html='html'> </div>
  8. </script>

APP JS:

  1. var content = Vue.components('content',{
  2. props:['html'],
  3. template:'#content-template'
  4. });
  5.  
  6. var app = new Vue({
  7. el:'#app',
  8. data:{
  9. html:''
  10. },
  11. methods:{
  12. appendContent:function() {
  13. $.ajax({
  14. type:'GET',
  15. url:'content.html'
  16. success:function(response){
  17. this.html = response;
  18. }
  19. });
  20. }
  21. }
  22. });

组件

  1. <div id='content'>
  2. <test1 />
  3. <test2 />
  4. </div>
  5.  
  6. <script type="text/x-template" id='test1-template'>
  7. <div>Test 1 Component</div>
  8. </script>
  9.  
  10. <script type="text/x-template" id='test2-template'>
  11. <div>Test 2 Component</div>
  12. </script>
  13.  
  14. <script>
  15. var test1 = {
  16. template:'#test1-template'
  17. };
  18.  
  19. var test2 = {
  20. template:'#test2-template'
  21. };
  22.  
  23. var subcontent = new Vue({
  24. el:'#content',
  25. components:{
  26. 'test1':test1,
  27. 'test2':test2,
  28. }
  29. });
  30. </script>

但是实际执行的时候会发现,组件没能正确渲染。折腾了一通,发现原来v-html指令原来有个坑,插入片段的时候,js代码无法执行

因此需要改变一下执行顺序。

  • 1.将组件拆分成html和js两个文件。
  • 2.先用ajax读取html文件。
  • 3.成功获取html文件后,通过require获取js文件。

修改后的代码如下(注:只是示例,不代表能跑得通):

  1. 主界面 html
  2. <div id='app'>
  3. <content v-html='html' />
  4. <input type='button' @click='appendContent' >appendContent</input>
  5. </div>
  6.  
  7. <script type="text/x-template" id='content-template'>
  8. <div class='content' v-html='html'> </div>
  9. </script>
  10.  
  11. 主界面 js
  12.  
  13. var content = Vue.components('content',{
  14. props:['html'],
  15. template:'#content-template'
  16. });
  17.  
  18. var app = new Vue({
  19. el:'#app',
  20. data:{
  21. html:''
  22. },
  23. methods:{
  24. appendContent:function() {
  25. $.ajax({
  26. type:'GET',
  27. url:'content.html'
  28. success:function(response){
  29. this.html = response;
  30. require(['content'],function(){});
  31. }
  32. });
  33. }
  34. }
  35. });
  36.  
  37. 组件 html
  38. <div id='content'>
  39. <test1 />
  40. <test2 />
  41. </div>
  42.  
  43. <script type="text/x-template" id='test1-template'>
  44. <div>Test 1 Component</div>
  45. </script>
  46.  
  47. <script type="text/x-template" id='test2-template'>
  48. <div>Test 2 Component</div>
  49. </script>
  50.  
  51. 组件 js
  52.  
  53. <script>
  54. var test1 = {
  55. template:'#test1-template'
  56. };
  57.  
  58. var test2 = {
  59. template:'#test2-template'
  60. };
  61.  
  62. var subcontent = new Vue({
  63. el:'#content',
  64. components:{
  65. 'test1':test1,
  66. 'test2':test2,
  67. }
  68. });
  69. </script>

  

【Vue】动态加载Html片段的更多相关文章

  1. vue动态加载组件

    vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...

  2. Vue动态加载异步组件

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...

  3. vue动态加载图片,取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  4. vue实践---vue动态加载组件

    开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...

  5. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  6. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...

  7. Vue动态加载图片图片不显示

    图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...

  8. vue 动态加载图片路径报错解决方法

    最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...

  9. vue动态加载图片

    如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...

随机推荐

  1. wqs二分

    今天模拟赛有一道林克卡特树,完全没有思路 赛后想了一想,不就是求\(k+1\)条不相交的链,使其权值之和最大嘛,傻了. 有一个最裸的\(DP\),设\(f[i][j][k]\)表示在以\(i\)为根的 ...

  2. pytest 13 使用自定义标记mark

    前言: pytest可以规定那些要跑,那些不跑,跑特定的哪些?比如以下的这个例子: #!/usr/bin/env/python # -*-coding:utf-8-*- import pytest @ ...

  3. jsp:include动作功能

    jsp:plugin动作:连接客户端的Applet或Bean插件 jsp:useBean动作:应用javaBean组件 jsp:setProperty动作:设置javaBean属性 jsp:getPr ...

  4. Node的安装和进程管理

    安装nvm git clone https://github.com/creationix/nvm.git source nvm/nvm.sh 安装node nvm install 6.14.4(版本 ...

  5. 最大似然估计与期望最大化(EM)算法

    一.最大似然估计与最大后验概率 1.概率与统计 概率与统计是两个不同的概念. 概率是指:模型参数已知,X未知,p(x1) ... p(xn) 都是对应的xi的概率 统计是指:模型参数未知,X已知,根据 ...

  6. Abnormal Detection(异常检测)和 Supervised Learning(有监督训练)在异常检测上的应用初探

    1. 异常检测 VS 监督学习 0x1:异常检测算法和监督学习算法的对比 总结来讲: . 在异常检测中,异常点是少之又少,大部分是正常样本,异常只是相对小概率事件 . 异常点的特征表现非常不集中,即异 ...

  7. CentOS7设置ssh服务以及端口修改

    很多时候我们都是通过SSH 服务 来对 Linux 进行操作,而不是直接来操作Linux机器,包括对Linux服务器的操作,因此,设置SSH服务对于学习Linux来说属于必备技能(尤其是运维人员),关 ...

  8. springBoot和Mybatis输出sql日志

    利用slf4j来输出日志. 首先需要版本兼容的slf4j-log4j12.log4j.slf4j-api.slf4j-nop.slf4j-simple这5个包. 可以去maven知识库中找到这5个包的 ...

  9. jdbcTemplate批量插入处理数据

    最近有个需求,就是批量处理数据,但是并发量应该很大,当时第一时间想到得是mybatis的foreach去处理,但是后来通过查资料发现,相对有spring 的jdbcTemplate处理速度,mybat ...

  10. js关于“call方法”百度,阿里超难面试题

    面试题:function fn(a,b){    console.log(this);    console.log(a);    console.log(a+b);}fn.call(1);fn.ca ...