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>动态组件< ...
随机推荐
- hibernate第三天 一对多 , 多对多
1.1． 阐述你对inverse的理解 答: 1.inverse的默认值是false,代表不放弃外键维护权,配置值为true,代表放弃了外键的维护权. 2.双方维护外键会多产生update语句,造成浪 ...
- Centos7安装mysql缺乏yum源怎么安装
找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget 1 yum install wget 2.下载mysql的 ...
- 后台执行UNIX/Linux命令和脚本的五种方法
hiveserver 后台启动 nohup "${HIVE_HOME}"/bin/hive --service hiveserver2 & 1. 使用&符号在后台执 ...
- python3-深浅复制
# Auther: Aaron Fan names = ["aaron", "alex", "james", "meihengfa ...
- Mat 与 IplImage 和 CvMat 的转换
在 OpenCV 2 中虽然引入了方便的 Mat 类,出于兼容性的考虑,OpenCV 依然是支持 C 语言接口的 IplImage 和 CvMat 结构.如果你要与以前的代码兼容,将会涉及 Mat 与 ...
- SDUT 3377 数据结构实验之查找五：平方之哈希表
数据结构实验之查找五:平方之哈希表 Time Limit: 400MS Memory Limit: 65536KB Submit Statistic Problem Description 给定的一组 ...
- C和C++中文件读写的区别
C中采用的主要是文件指针的办法,C++中对文件的操作主要运用了“文件流”(即非标准的输入输出)的思想 eg1": #include<stdio.h> //... FILE* fp ...
- Gremlin:图遍历语言
Gremlin简介 Gremlin是Apache TinkerPop 框架下的图遍历语言.Gremlin是一种函数式数据流语言,可以使得用户使用简洁的方式表述复杂的属性图(property graph ...
- 读取url接口数据
string url = "http://localhost:8180/city-smscenter/smscenter?cmd=flowsms.queryMobileSmsList& ...
- C#之WinForm界面分辨率问题
在做上一个C#小工具的时候,当时为了处理界面最大化,分辨率问题,只是简单的用各种···Panle控价简单随意的处理控件的大小位置,字体什么的就随缘了(貌似有点不负责任啊,嘿嘿~). 所以在开始第二个C ...