vue动态加载不同的组件（分内部和外部组件）
<!DOCTYPE html>
<html> <head>
<title> hello world vue </title>
<meta charset="utf-8" />
</head> <body>
<div id="app" v-cloak>
<!-- 缺省挂载 currentView 变量指定的组件 -->
<component :is="currentView"></component>
<button @click="handleChangeView('A')">A</button>
<button @click="handleChangeView('B')">B</button>
<button @click="handleChangeView('C')">C</button>
<button @click="handleChangeViewHome()">Home</button>
</div>
</body> </html> <script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script> <script>
$(document).ready(function() { });
</script> <script>
Vue.component('Home', {
template: '<div> 外部组件 </div>',
props: {},
data: function() {
return {}
},
methods: {}
}); var app = new Vue({
el: '#app',
data: {
currentView: 'comA'
},
computed: {},
methods: {
handleChangeView: function(x) {
this.currentView = 'com' + x;
},
handleChangeViewHome: function() {
this.currentView = 'Home';
}
},
components: {
comA: {
template: '<div>组件A</div>'
},
comB: {
template: '<div>组件B</div>'
},
comC: {
template: '<div>组件C</div>'
}
},
mounted: function() {}
});
</script>
vue动态加载不同的组件（分内部和外部组件）的更多相关文章
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- vue动态加载图片，取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...
随机推荐
- Why you need to understand garbage collection
Why you need to understand garbage collection I’ve been interviewing lots of C# developers recently, ...
- Server Tomcat v8.5 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.
Server Tomcat v9.0 Server at localhost was unable to start within 45 seconds. If the server requires ...
- Oracle数据库备份、灾备的23个常见问题
为了最大限度保障数据的安全性,同时能在不可预计灾难的情况下保证数据的快速恢复,需要根据数据的类型和重要程度制定相应的备份和恢复方案.在这个过程中,DBA的职责就是要保证数据库(其它数据由其它岗位负责) ...
- 三句话看明白jdk收费吗
对于从oracle下载的jdk8:JDK8u200(含)以下版本不收费. 对于从oracle下载的jdk11:JDK 11.0.0不收费,JDK 11.0.1不收费. 对于openjdk:免费 ——— ...
- vue-devtools 获取到 vuex store 和 Vue 实例的？
vue-devtools 获取到 vuex store 和 Vue 实例的? https://github.com/vuejs/vue-devtools 安装了 vue-devTools ...
- springboot响应消息（http）的编码设置
一.方式一 在单个REST接口上设置 @ResponseBody @RequestMapping(value = "sys/getTree1",method = RequestMe ...
- javascript常用方法 - String
// 1.长字符串 // 1.1 let longString1 = "This is a very long string which needs " + "to wr ...
- python开源项目聚合推荐【1】
******************************************************* 01项目名:unimatrix 功能介绍:Python模拟“黑客帝国”影片中的终端动画脚 ...
- qt linux 打包
本文在银河麒麟上成功运行,程序类型:Qt控制台,使用到的Qt外库:mysql数据库 1.环境一共有两台,1是编译机[装有Qt.数据库],2是运行机[纯净机] 2.在编译机上安装Qt.mysql,我这里 ...
- Kubernetes平台环境搭建
软件 版本 Linux操作系统 CentOS7.4 Kubernetes 1.12 Docker 18.xx-ce Etcd 3.x Flannel 0.10 角色 IP 组件 推荐配置 master ...