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>动态组件< ...
随机推荐
- 树莓派研究笔记（2）-- 安装Nginx 服务器，PHP 和 SQLite
1. 安装nginx web 服务器 sudo apt-get install nginx 2. 启动nginx,nginx的www目录默认在/usr/share/nginx/html中 sudo / ...
- 形式化验证工具（PAT）Perterson Algorithm学习
今天学习一下Perterson Algorithm. 这个算法是使用三个变量来实现并发程序的互斥性算法. 具体看一下代码: Peterson算法是一个实现互斥锁的并发程序设计算法,核心就是三个标志位是 ...
- 形式化验证工具（PAT）2PC协议学习
今天我们来看看2PC协议,不知道大家对2PC协议是不是了解,我们先简单介绍一下. 两阶段提交协议(two phase commit protocol, 2PC)可以保证数据的强一致性,许多分布式关系型 ...
- 数据结构 Job
问题描述 有 n 项工作在等待队列中等待处理,编号为 1-n. 每个工作有个优先级 p.处理机同一时间只能处理一项工作.处理机决定接下来处理哪一项工作的方式为:从队首取出一项工作 x,若等待队列中没有 ...
- Glib学习笔记（二）
你将学到什么 如何实现Object的构造函数和析构函数 如何在条件检测不允许的情况下终止对象创建 Object的构造函数 对象的构造函数是不允许失败,如果你需要一个允许失败的GObject构造函数,使 ...
- mysql 表压缩
mysql中经常出现历史表,这些表不会进行修改数据的操作,只有读操作.那么我们可以对其进行压缩处理,缩减磁盘空间.Innodb表和MyISAM表的压缩指令不一样.下面分别来讨论: 一.InnoDB表 ...
- win10更新后IE不见了
只是快捷方式不见了,到C:\Program Files\internet explorer\iexplore.exe就看到了,可以正常运行
- ObjectARXWizards & AutoCAD .NET Wizards 下载地址
Autodesk Developer Network ObjectARX Wizards The ObjectARX Wizards for AutoCAD 2016 for Visual Stud ...
- SQLException: Incorrect string value: '\xE4\xB8\xAD\xE5\x9B\xBD' for column at row 1
这个是由于新建数据库没有选择默认字符集导致的,只要选择utf8即可. 如果以上还无法解决,那可能是表里的varchar字符集也不对
- J.U.C AQS(abstractqueuedssynchronizer--同步器)
J.U.C AQS(abstractqueuedssynchronizer--同步器) 同步器是用来构建锁和其他同步组件的基础框架,它的实现主要依赖一个int成员变量来表示同步状态以及通过一个FI ...