<!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动态加载不同的组件（分内部和外部组件）的更多相关文章

  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. jenkins安装启动(docker)

    mkdir /opt/jenkins -pvim /opt/jenkins/Dockerfile FROM jenkins/jenkins:lts EXPOSE 8080 50000 vim /opt ...

  2. RSA前台加密后台解密的应用

    写在前面 项目安全测试需要将登录功能修改, AES加密不符合要求, 现改为RSA非对称加密.(将登录密码加密后传给后台, 后台解密后再进行一系列的校验) .期间遇到了前台js加密但是后台解密失败的问题 ...

  3. OSPF协议介绍及配置

    一.OSPF概述 回顾一下距离矢量路由协议的工作原理:运行距离矢量路由协议的路由器周期性的泛洪自己的路由表,通过路由的交互,每台路由器都从相邻的路由器学习到路由,并且加载进自己的路由表中,而对于这个网 ...

  4. html css 浮层 侧边栏

    2019-7-1 16:02:25 星期一 实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去 <!DOCTYPE HTML> <html lang="en" ...

  5. 今天使用Jmeter时遇到的几个问题及解决方法

    JDBC Request :Cannot load JDBC driver class 'com.mysql.jdbc.Driver'解决办法 在Jmeter中run JDBC Request时,收到 ...

  6. Egret自定义计时器（TimerManager和Laya.timer）

    一 自定义计时器 因为游戏中经常用到计时器,比如每1秒发射一枚子弹啊,每2秒怪物AI自动转向啊 每次去new Timer 然后addEventListener(egret.TimerEvent...  ...

  7. 初学nodejs express小案例——小小相册(不涉及数据库，非常详细)

    业务简介: 显示文件夹 点击显示相册 上传相册 一.在主页显示文件夹  首先,我们要建立以上的文件夹,其中views用于放模板ejs,uploads里放的是相册文件夹,public是网页所需要的css ...

  8. 使用Cloud Toolkit部署SpringBoot项目到服务器

    由于我们经常发布项目到测试服,在测试服上调试一些本地无法调试的东西,所以出现了各种打包,然后上传.启动,时间都耗费在这无聊的事情上面了,偶然在网上看到IntelliJ IDEA有 Cloud Tool ...

  9. python安装 错误 “User installations are disabled via policy on the machine”

    解决方法一:  1.在运行里输入 gpedit.msc  2.计算机配置管理>>管理模板>>windows组件>>windows Installer>> ...

  10. IIS部署FLASK网站

    在 Windows 平台部署基于 Python 的网站是一件非常折腾的事情,Linux/Unix 平台下有很多选择,本文记录了 Flask 部署到 IIS 的主要步骤,希望对你有所帮助. 涉及工具和平 ...