Vue2.0 【第二季】第9节 Component 标签
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 标签的更多相关文章
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
随机推荐
- 双因子方差分析|adjusted R|强度|SSA|SSE|SST|
应用统计学 方差分析的基本假设: 组间组平均与总平均的不同是由treatment引发的.单个值与组平均的不同是由组内error引发的. 如果没有处理误差SSA=SSE,所以右尾假设如果F>1则处 ...
- Painter
时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 杂货店出售一种由N(3<=N<=12)种不同颜色的颜料,每种一瓶(50ML),组成的颜料套装. 你现在需要使用这 ...
- ZOJ-4089-Little Sub and Isomorphism Sequences
给定你个数组,以及一些单点修改,以及询问,每次询问需要求得,最长的字串长度,它在其他位置存在同构. 当存在两个不相交的区间同构时,如: 1.2.…….n -1.n.n + 1.…….m.m + 1.m ...
- Android开发之《ffmpeg解码mjpeg视频流》
MJPEG格式和码流分析,MJPEG格式的一些简介 FFmpeg解码USB摄像头MJPEG输出:http://blog.csdn.net/light_in_dark/article/details/5 ...
- UML 类图介绍
UML 类图介绍 一. UML 简介 UML ( Unified Modeling Language )即统一建模语言,是 OMG ( Object Management Group )发表的图标式软 ...
- JAVA递归、非递归遍历二叉树
前序遍历:1.访问根节点 2.前序遍历左子树 3.前序遍历右子树 中序遍历:1.中序遍历左子树 2.访问根节点 3.中序遍历右子树 后序遍历:1.后序遍历左子树 2.后序遍历右子树 3.访问根节点-- ...
- 在Docker内安装jenkins运行和基础配置
这里是在linux环境下安装docker之后,在doucer内安装jenkins --------------------docker 安装 jenkins---------------------- ...
- Dubbo、MQ等
1,Dubbo.MQ 1)Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案 2)Dubbo采用全Spring配置方式,透明化接入应用,对应用没有 ...
- Kubelet
Kubelet 相关博客 Kubelet组件深度解析 Kubelet组件解析 Kubelet运行机制分析 Kubelet与apiserver通信 ___ Kubelet组件运行在Node节点上,维持运 ...
- HF Java Chap 1
介绍了java的工作方式以及几个有趣的小程序 Java的工作模式 大体来说有四个步骤: 源代码 编译器 编译器的输出 Java虚拟机 源代码 这是我们程序员接触到的部分.根据我们面临的问题,编写一个符 ...