Vue2.0 【第二季】第9节 Component 标签

第9节 Component 标签

component标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

1、我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC

var componentA={

	template:`<div style="color:red">I'm componentA.</div>`

}

var componentB={

	template:`div style="color:green">I'm componentB.</div>`

}

var componentC={

	template:`<div style="color:pink">I'm componentC.</div>`

}

2、我们在构造器的components选项里加入这三个组件

var app = new Vue({

	el:'#app',

	data:{

		who:'componentA'

	},

	components:{

		"componentA":componentA,

		"componentB":componentB,

		"componentC":componentC,

	}

})

3、我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件

<div id="app">

	<component v-bind:is="who"></component>

</div>

这就是我们的组件标签的基本用法。我们提高一下，给页面加个按钮，每点一下更换一个组件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>component-4</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>component-4</h1>

        <hr>

        <div id="app">

            <component v-bind:is="who"></component>

            <button @click="changeComponent">changeComponent</button>

        </div>

        <script type="text/javascript">

            var componentA={

				template:`<div style="color:red">I'm componentA.</div>`

			}

			var componentB={

				template:`div style="color:green">I'm componentB.</div>`

			}

			var componentC={

				template:`<div style="color:pink">I'm componentC.</div>`

			}

            var app = new Vue({

                el:'#app',

                data:{

                    who:'componentA'

                },

                components:{

                    "componentA":componentA,

                    "componentB":componentB,

                    "componentC":componentC,

                },

                methods:{

                    changeComponent:function(){

                        if(this.who=='componentA'){

                            this.who='componentB';

                        }else if(this.who=='componentB'){

                            this.who='componentC';

                        }else{

                            this.who='componentA';

                        }

                    }

                }

            })

        </script>

    </body>

</html>

浏览器效果：

Vue2.0 【第二季】第9节 Component 标签的更多相关文章

  1. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  2. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  3. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  4. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  5. Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

    目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...

  6. Vue2.0 【第二季】第5节 Template制作模板

    目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...

  7. Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  8. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  9. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

随机推荐

  1. Hypothesis Tests for One Population Mean When σ Is Known

    9.5 Hypothesis Tests for One Population Mean When σ Is Known 使用z-test前提(同使用mean distribution之前的考虑) 在 ...

  2. 获取指定网卡对应的IP地址

    #include <stdio.h> #include <string.h> #include <sys/socket.h> #include <sys/ty ...

  3. Java包装类之实体类不要使用基本类型

    [color=rgba(0, 0, 0, 0.75)]今天来记录一下,在项目中因为基本类型,所产生的bug.**U•ェ•*U** 包装类:8种基本类型的包装类 应用场景:数据库建立实体映射多用包装类 ...

  4. Mysql的分页查询语句的性能分析

    MySql分页sql语句,如果和MSSQL的TOP语法相比,那么MySQL的LIMIT语法要显得优雅了许多.使用它来分页是再自然不过的事情了. 1.1最基本的分页方式: 在中小数据量的情况下,这样的S ...

  5. 数据库三大范式和反范式 · oldmee

    后一个范式都是在满足前一个范式的基础上建立的. 1NF 无重复的列.表中的每一列都是不可分割的基本数据项.不满足1NF的数据库不是关系数据库.如联系人表(姓名,电话),一个联系人有家庭电话和公司电话, ...

  6. Python中为什么可以通过bin(n & 0xffffffff)来获得负数的补码？

    一开始我以为这不是个大问题,因为本来整型数在内存中就是以补码的形式存在的,输出自然也是按照补码输出的,例如C语言中 printf("%X\n",-3); //输出 //FFFFFF ...

  7. <JZOJ5937&luogu3944>斩杀计划&肮脏的牧师

    第一次写桶排相关题.... #include<cstdio> #include<iostream> #define rint register int template < ...

  8. 传统if 从句子——以条件表达式作为if条件

    传统if 从句子——以条件表达式作为 if条件if [ 条件表达式 ]then command command commandelse command commandfi   条件表达式 文件表达式 ...

  9. 深入理解Tomcat（12）拾遗

    前言 如何使用? 源码解读 总结 前言 Tomcat为了提高性能,在接受到socket传入的字节之后并不会马上进行编码转换,而是保持byte[]的方式,在用到的时候再进行转换.在tomcat的实现中, ...

  10. JavaScript中prompt的使用

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Worldhel ...