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>动态组件< ...
随机推荐
- 写一个函数封装printf用作trace
转自http://blog.csdn.net/coder_weisong/article/details/10285291 写一个函数封装printf用作trace 方法一: #inc ...
- SQLite 如何清空表数据并将递增量归零
SQLite并不支持TRUNCATE TABLE语句 方式一: DELETE FROM [Tab_User] --不能将递增数归零 方式二: DELETE FROM sqlite_sequence W ...
- python logging日志库
项目中使用的日志库是使用python官方库logging封装的,但是居然一直么有设置日志自动滚动,经常会受到告警说哪台机器磁盘空间又满,清理一下,于是研究一下,解决这个问题. 参考:https://d ...
- （原创）BZOJ 2038 小Z的袜子(hose) 莫队入门题+分块
I - 小Z的袜子(hose) 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z ...
- hdu4658(广义五边形＆分割函数２)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4658 题意:f(x) 为将 x 分成其他数和的形式的方案数．对于 t 组输入,输出 f(xi, k), ...
- 魔法少女 LJJ——线段树
题目 [题目描述] 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女 LJJ 已经觉得自己见过世界上的所有稀奇古怪的事情了. LJJ 感叹道“这里真是个迷人的绿色世界,空气清新.淡雅,到处 ...
- P2389 电脑班的裁员
题意:长度为n的序列,选出k个连续的字段,使和最大(有负数) 暴力只选正数且不考虑k的边界问题50(数据...) 正解从$O(n^3)到O(n)$不等,($O(n)$不会) DP 1.$O(n^3)$ ...
- springcloud系列四 搭建服务模块重点讲解
首先这个服务地址:一定不要写错,是自己注册中心开启的地址 如果注意到这些了,可以简单的进行操作,也可以不需要mybatis与数据库连接,在controller里直接返回相应的数据可以了,不用这么幸苦的 ...
- springcloud系列三 搭建服务模块
搭建服务模块为了模拟正式开发环境,只是少写了service层直接在controller里面直接引用,直接上图和代码:更为方便: 创建完成之后加入配置: pom.xml文件: <?xml vers ...
- zookeeper分布式锁简单实现(JavaApi)
1.创建会话连接 package com.karat.cn.zookeeperAchieveLock.javaapilock; import org.apache.zookeeper.WatchedE ...