1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title> hello world vue </title>
  6.     <meta charset="utf-8" />
  7. </head>
  8.  
  9. <body>
  10.     <div id="app" v-cloak>
  11.         <!-- 缺省挂载 currentView 变量指定的组件 -->
  12.         <component :is="currentView"></component>
  13.         <button @click="handleChangeView('A')">A</button>
  14.         <button @click="handleChangeView('B')">B</button>
  15.         <button @click="handleChangeView('C')">C</button>
  16.         <button @click="handleChangeViewHome()">Home</button>
  17.     </div>
  18. </body>
  19.  
  20. </html>
  21.  
  22. <script src="jquery-3.1.1.js"></script>
  23. <script src="vue.js"></script>
  24.  
  25. <script>
  26.     $(document).ready(function() {
  27.  
  28.     });
  29. </script>
  30.  
  31. <script>
  32.     Vue.component('Home', {
  33.         template: '<div> 外部组件 </div>',
  34.         props: {},
  35.         data: function() {
  36.             return {}
  37.         },
  38.         methods: {}
  39.     });
  40.  
  41.     var app = new Vue({
  42.         el: '#app',
  43.         data: {
  44.             currentView: 'comA'
  45.         },
  46.         computed: {},
  47.         methods: {
  48.             handleChangeView: function(x) {
  49.                 this.currentView = 'com' + x;
  50.             },
  51.             handleChangeViewHome: function() {
  52.                 this.currentView = 'Home';
  53.             }
  54.         },
  55.         components: {
  56.             comA: {
  57.                 template: '<div>组件A</div>'
  58.             },
  59.             comB: {
  60.                 template: '<div>组件B</div>'
  61.             },
  62.             comC: {
  63.                 template: '<div>组件C</div>'
  64.             }
  65.         },
  66.         mounted: function() {}
  67.     });
  68. </script>

vue动态加载不同的组件（分内部和外部组件）的更多相关文章

  1. vue动态加载组件

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

  2. Vue动态加载异步组件

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

  3. Vue 动态加载组件

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

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

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

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

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

  6. vue动态加载图片，取消格式验证

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

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

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

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

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

  9. vue动态加载图片

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

随机推荐

  1. 韦东山视频第3课第1节_JNI_P【学习笔记】

    一.android系统java调用C方法的大概的流程图如下: 二.下面写一个JNI的程序,java的hello方法在加载native库之后能够调用C方法. 2.1 JNIDemo.java 文件内容如 ...

  2. (转)Nginx中sendfile的作用

    原文:https://blog.csdn.net/zhusixun/article/details/81702380 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上 ...

  3. Ubuntu下卸载anaconda

    转载:https://blog.csdn.net/m0_37407756/article/details/77968724(一)删除整个anaconda目录: 由于Anaconda的安装文件都包含在一 ...

  4. github 体积限制

    github 体积限制 仅供了解,切勿滥用.希望自觉维护良好社区. 单文件 单个文件大于 50M 时会收到警告, 100M 时会被拒绝. 该警告将告诉您哪些文件太大: remote: warning: ...

  5. Qt编写安防视频监控系统18-云台控制

    一.前言 云台控制是视频监控系统中必备的一个功能,对球机进行上下左右的移动,还有焦距的控制,其实核心就是控制XYZ三个坐标轴,为了开发这个模块,特意研究了各种云台控制的方法和开源库比如soap,有些厂 ...

  6. ZXing生成二维码、读取二维码

    使用谷歌的开源包ZXing maven引入如下两个包即可 <dependency>   <groupId>com.google.zxing</groupId>  & ...

  7. Win732位DotNetCore部署IIS错误记录

    部署环境为:Win7专业版32位,数据库Mysql5.7.27-win32 1.先启用IIS功能 2.安装Mysql5.7.27-win32,使用解压版安装 安装步骤: mysql的解压根目录下新建m ...

  8. Kubernetes 原理架构介绍(一)

    目录 一.Kubernetes 是什么 二.Kubernetes 设计架构 三.Kubernetes的核心技术概念和API对象 Cluster Master Node Pod Controller D ...

  9. Tomcat总结四种部署方式

    静态部署 一.Webapps 把项目复制到Tomcat的Webapps 把war包复制到Tomcat的Webapps下 *修改Webapps的默认路径: * Tomcat的conf目录下的server ...

  10. DockerFile语法【h】

    DockerFile在我理解就是可以将所需要构建镜像的功能.组件都天前配置好,然后直接生成一个Image,而不是先生成镜像,再通过修改容器的方法来生成最终需要的镜像.   镜像的定值实际上就是定值每一 ...