Vue.js-----轻量高效的MVVM框架（八、使用组件）
什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
#1、全局注册
html： <global-component></global-component>是自定义的全局组件
<h3>#注册</h3>
<div id="dr0101">
<span>1、下面的是一个全局的构造器</span>
<global-component></global-component>
</div>
<br />
<div id="dr0102">
<span>2、下面的是一个全局的构造器</span>
<global-component></global-component>
</div>
js：创建组件构造器、注册组件、在vm中使用
//***************************************************************************
//全局注册
//1、创建一个组件构造器
var GlobalComponent = Vue.extend({
template: "<div>hello, this is a global component</div>"
});
//2、如果要全局使用，则使用Vue注册组件
Vue.component("global-component", GlobalComponent);
//3、使用
var dr0101 = new Vue({
el: "#dr0101"
});
var dr0102 = new Vue({
el: "#dr0102",
});
页面显示
#2、局部注册
html：<local-component></local-component>是自定义的局部组件。
<h3>#局部注册</h3>
<div id="dr0201">
<span>3、下面的是一个局部的构造器（在dr0201中，使用了<local-component>，因为没有全局的<local-component>或者局部的注册<local-component>，所以这里不显示下面的组件，并且在控制台有警告）</span>
<local-component></local-component>
</div>
<br />
<div id="dr0202">
<span>4、下面的是一个局部的构造器</span>
<local-component></local-component>
</div>
js：创建组件、要局部使用则在vm实例中的data属性components中添加"local-component": LocalComponent，其中"local-component"是在页面中要显示的组件的名称，LocalComponent是定义的组件的名称。
//局部注册
//1、创建一个组件构造器
var LocalComponent = Vue.extend({
template: "<div>hello, this is a local component</div>"
});
//2、这里不添加局部组件，进行测试
var dr0201 = new Vue({
el: "#dr0201",
});
//3、如果要在某一个Vue组件中使用，则把创建的组件构造器添加到components中
var dr0202 = new Vue({
el: "#dr0202",
components: {
"local-component": LocalComponent,
}
});
页面：
#3、注册语法糖
html：
<h3>#注册语法糖</h3>
<div id="dr0301">
<span>dr0301使用语法糖注册的全局组件</span>
<globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0302">
<span>dr0302使用语法糖注册的全局组件</span>
<globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0401">
<span>dr0401使用没有用语法糖注册的局部组件</span>
<localcomponent01></localcomponent01>
</div>
<br />
<div id="dr0402">
<span>dr0402使用用语法糖注册的局部组件</span>
<localcomponent01></localcomponent01>
</div>
js：利用vue的语法糖注册全局组件和局部组件
//注册语法糖
//1.1 在一个步骤中扩展与注册一个全局
Vue.component("globalcomponent01", {
template: "<div>this is globalcomponent01</div>",
});
//1.2 在dr0301中使用注册的全局组件globalcomponent01
var dr0301 = new Vue({
el: "#dr0301",
});
//1.3 在dr0302中使用注册的全局组件globalcomponent01
var dr0302 = new Vue({
el: "#dr0302",
});
//2.1 在dr0401中直接使用没有注册过的localcomponent01
var dr0401 = new Vue({
el: "#dr0401",
});
//2.2 在dr0402中直接使用注册的localcomponent01
var dr0402 = new Vue({
el: "#dr0402",
components: {
"localcomponent01": {
template: "<div>this is localcomponent01</div>",
},
}
});
页面显示：
#4、组件选项问题
html：
<h3>#组件选项问题</h3>
<div id="dr0501">
<data-component></data-component>
</div>
<div id="dr0502">
<data-component></data-component>
</div>
js：
//组件选项问题
var lover = {
name: "zhangyao",
age: "25",
};
//DataComponent的data和el选项必须是有返回值的函数，并且template中如果要引入数据的话，只能引入这里定义的data
var DataComponent = Vue.extend({
data: function() {
return lover;
},
template: "<div>name: {{name}}, age: {{age}}</div>"
});
//在dr0501和dr0502的实例中都注册DataComponent组件
var dr0501 = new Vue({
el: "#dr0501",
components: {
"data-component": DataComponent,
}
});
var dr0502 = new Vue({
el: "#dr0502",
components: {
"data-component": DataComponent,
}
});
页面：
#5、模板解析
html：
<h3>#模板解析</h3>
<div>
<span>Vue的模板是Dom模板，所以它必须是有效的html片段，对放在html模板中的元素有限制：</span>
<ul>
<li>a标签不能包含其他的交互元素（按钮和链接）</li>
<li>ul和ol只能直接包含li</li>
<li>select只能包含option和optgroup</li>
<li>table只能包含thead、tbody、tr、caption、col、colgroup</li>
<li>tr只能直接包含th、td</li>
</ul>
<span>另外，自定义个组件不是有效的模板，即便my-select组件最终展开为select下拉菜单片段，也会解析失败</span>
</div>
<div id="dr06">
<h4>遍历vue实例中的data</h4>
<div v-for="item in items">
<div>index: {{$index}}, name: {{item.name}}, desc: {{item.desc}} </div>
</div>
<h4>遍历vue组件中的data</h4>
<div>
<temp-component></temp-component>
</div>
</div>
js:
//模板解析
//这里的data数据只能供模板使用
var TempComponent = Vue.extend({
data: function() {
return {
tempItems: [{
name: "tempNameA",
desc: "tempDescA"
}, {
name: "tempNameB",
desc: "tempDescB"
}, {
name: "tempNameC",
desc: "tempDescC"
}, ]
}
},
//在模板中定义的有item遍历，其中tempItems的数据只能来源于TempComponent中的data数据
template: "<div v-for='tempItem in tempItems'>index: {{$index}}, name: {{tempItem.name}}, desc: {{tempItem.desc}}<div>"
});
//这里的data数据不能使用在模板中
var dr06 = new Vue({
el: "#dr06",
data: {
items: [{
name: "name01",
desc: "desc01"
}, {
name: "name02",
desc: "desc02"
}, {
name: "name03",
desc: "desc03"
}]
},
components: {
"temp-component": TempComponent,
}
});
页面显示：
附：下面附上完整的html代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title>Vue组件</title>
</head> <body style="background-color: lightgray;">
<h3>#注册</h3>
<div id="dr0101">
<span>1、下面的是一个全局的构造器</span>
<global-component></global-component>
</div>
<br />
<div id="dr0102">
<span>2、下面的是一个全局的构造器</span>
<global-component></global-component>
</div> <hr /> <h3>#局部注册</h3>
<div id="dr0201">
<span>3、下面的是一个局部的构造器（在dr0201中，使用了<local-component>，因为没有全局的<local-component>或者局部的注册<local-component>，所以这里不显示下面的组件，并且在控制台有警告）</span>
<local-component></local-component>
</div>
<br />
<div id="dr0202">
<span>4、下面的是一个局部的构造器</span>
<local-component></local-component>
</div> <hr /> <h3>#注册语法糖</h3>
<div id="dr0301">
<span>dr0301使用语法糖注册的全局组件</span>
<globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0302">
<span>dr0302使用语法糖注册的全局组件</span>
<globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0401">
<span>dr0401使用没有用语法糖注册的局部组件</span>
<localcomponent01></localcomponent01>
</div>
<br />
<div id="dr0402">
<span>dr0402使用用语法糖注册的局部组件</span>
<localcomponent01></localcomponent01>
</div> <hr /> <h3>#组件选项问题</h3>
<div id="dr0501">
<data-component></data-component>
</div>
<div id="dr0502">
<data-component></data-component>
</div> <hr /> <h3>#模板解析</h3>
<div>
<span>Vue的模板是Dom模板，所以它必须是有效的html片段，对放在html模板中的元素有限制：</span>
<ul>
<li>a标签不能包含其他的交互元素（按钮和链接）</li>
<li>ul和ol只能直接包含li</li>
<li>select只能包含option和optgroup</li>
<li>table只能包含thead、tbody、tr、caption、col、colgroup</li>
<li>tr只能直接包含th、td</li>
</ul>
<span>另外，自定义个组件不是有效的模板，即便my-select组件最终展开为select下拉菜单片段</span>
</div>
<div id="dr06">
<h4>遍历vue实例中的data</h4>
<div v-for="item in items">
<div>index: {{$index}}, name: {{item.name}}, desc: {{item.desc}} </div>
</div>
<h4>遍历vue组件中的data</h4>
<div>
<temp-component></temp-component>
</div>
</div> <script>
//***************************************************************************
//全局注册
//1、创建一个组件构造器
var GlobalComponent = Vue.extend({
template: "<div>hello, this is a global component</div>"
});
//2、如果要全局使用，则使用Vue注册组件
Vue.component("global-component", GlobalComponent);
//3、使用
var dr0101 = new Vue({
el: "#dr0101"
});
var dr0102 = new Vue({
el: "#dr0102",
});
//***************************************************************************
//局部注册
//1、创建一个组件构造器
var LocalComponent = Vue.extend({
template: "<div>hello, this is a local component</div>"
});
//2、这里不添加局部组件，进行测试
var dr0201 = new Vue({
el: "#dr0201",
});
//3、如果要在某一个Vue组件中使用，则把创建的组件构造器添加到components中
var dr0202 = new Vue({
el: "#dr0202",
components: {
"local-component": LocalComponent,
}
});
//***************************************************************************
//注册语法糖
//1.1 在一个步骤中扩展与注册一个全局
Vue.component("globalcomponent01", {
template: "<div>this is globalcomponent01</div>",
});
//1.2 在dr0301中使用注册的全局组件globalcomponent01
var dr0301 = new Vue({
el: "#dr0301",
});
//1.3 在dr0302中使用注册的全局组件globalcomponent01
var dr0302 = new Vue({
el: "#dr0302",
});
//2.1 在dr0401中直接使用没有注册过的localcomponent01
var dr0401 = new Vue({
el: "#dr0401",
});
//2.2 在dr0402中直接使用注册的localcomponent01
var dr0402 = new Vue({
el: "#dr0402",
components: {
"localcomponent01": {
template: "<div>this is localcomponent01</div>",
},
}
});
//***************************************************************************
//组件选项问题
var lover = {
name: "zhangyao",
age: "25",
};
//DataComponent的data和el选项必须是有返回值的函数，并且template中如果要引入数据的话，只能引入这里定义的data
var DataComponent = Vue.extend({
data: function() {
return lover;
},
template: "<div>name: {{name}}, age: {{age}}</div>"
});
//在dr0501和dr0502的实例中都注册DataComponent组件
var dr0501 = new Vue({
el: "#dr0501",
components: {
"data-component": DataComponent,
}
});
var dr0502 = new Vue({
el: "#dr0502",
components: {
"data-component": DataComponent,
}
});
//***************************************************************************
//模板解析
//这里的data数据只能供模板使用
var TempComponent = Vue.extend({
data: function() {
return {
tempItems: [{
name: "tempNameA",
desc: "tempDescA"
}, {
name: "tempNameB",
desc: "tempDescB"
}, {
name: "tempNameC",
desc: "tempDescC"
}, ]
}
},
//在模板中定义的有item遍历，其中tempItems的数据只能来源于TempComponent中的data数据
template: "<div v-for='tempItem in tempItems'>index: {{$index}}, name: {{tempItem.name}}, desc: {{tempItem.desc}}<div>"
});
//这里的data数据不能使用在模板中
var dr06 = new Vue({
el: "#dr06",
data: {
items: [{
name: "name01",
desc: "desc01"
}, {
name: "name02",
desc: "desc02"
}, {
name: "name03",
desc: "desc03"
}]
},
components: {
"temp-component": TempComponent,
}
});
</script>
</body> </html>
Vue.js-----轻量高效的MVVM框架（八、使用组件）的更多相关文章
- Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
- Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）
这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- Vue.js-----轻量高效的MVVM框架（五、计算属性）
#基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...
- Vue.js-----轻量高效的MVVM框架（四、指令）
Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性.指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用.指令的职责就是当其表达式的值 ...
- Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）
插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...
- Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
随机推荐
- C语言-郝斌笔记-001求二次方程的根
求二次方程的根 #include <stdio.h > #include<math.h> int main(void) { //把三个系数保存到计算机中 ; //=不表示相等, ...
- 安装visual_Paradigm，时序图的应用
此安装包已经上传到sunny的百度网盘. 删除,即,右击别的地方,然后,选择delete即可. 拖箭头,拖到某个实体上,再松开,会自动连线. 很好的一款画图工具.
- PartyLocation的Post请求问题---debug
这里,遇到了一个debug: @Override public void setPrimaryPartyLocation(PartyLocation partyLocation) { if (!get ...
- Netty的Channel
Channel是一个网络端口连接,或者是可以进行读,写,链接,绑定端口的组件的连接. Channel就是一个链接,它提供了如下的功能. 1:获取当前链接的状态 2:配置当前链接参数 3:进行read ...
- JLink间接烧写【转自armobbs】
1. 简要说明 JLink的调试功能.烧写Flash的功能都很强大,但是对于S3C2410.S3C2440的Flash操作有些麻烦:烧写Nor Flash时需要设置SDRAM,否则速率很慢:烧写Nan ...
- 树莓派(Raspberry Pi 3) - 系统烧录及xshell连接
树莓派(Raspberry pi)是一块集成度极高的ARM开发板,不仅包含了HDMI,RCA,CSI,HDMI,GPIO等端口,还支持蓝牙以及无线通信.由于 Raspberry Pi 几乎是为 Lin ...
- c语言判断是否是utf8字符串，计算字符个数
#include <stdio.h> #include <string.h> #include <stdlib.h> /********************** ...
- JVM各区域的用途
程序计数器 用于给字节码解释器来选取吓一跳需要执行的字节码指令.每个线程有一个独立的程序计数器去,且各个线程之间互不影响.如果线程正在执行一个Java方法,这个计数器记录的是正在执行的虚拟机字节码指令 ...
- python文件上传的三种方式
def upload(request): return render(request, 'upload.html') def upload_file(request): username = requ ...
- Kafka 练习题
一.选择题 Kafka服务器默认能接收的最大消息是多大? (单选) A A:1M B:10M C:100M D:没有大小限制,因为支持大数据 2.Kafka的特性(多选) ABCD A:高吞吐量.低 ...