[js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容,那么什么是组件呢?
通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用
组件的基本用法:
<div id="box">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
//构造组件
var c = Vue.extend({
template : '<h3>这是个标题</h3>'
}); //注册组件, 注册了一个名称为ccc的组件,组件的内容是c
Vue.component('ccc',c); //全局注册
new Vue({
el : '#box'
});
</script>
组件的编译解释原理:
1,首先用Vue.extend创建一个组件,用template设置组件的内容
2,用Vue.component注册一个全局组件, 第一个参数为组件的名称, 第二个参数为组件的内容
3,在vue的实例,也可以这么说,在vue这个根组件下 用el指定这个组件 显示在哪个元素下
那么组件运行流程可以这么理解:
在上例中, 首先发现第2行有个自定义组件<ccc></ccc> 然后 去12行 查找<ccc>组件对应的内容 c, 而c的内容是 <h3>这是个标题</h3> 所以<ccc>就被替换成这个标题, 而 第4行的<ccc>组件 是不会被解释的,
因为组件只在id为box的元素下会被编译解释.
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
var c = Vue.extend({
template: '<h3>我是一个标题</h3>'
});
Vue.component("ccc", c); //注册全局组件
new Vue({
el: '#box1'
});
new Vue({
el: '#box2'
});
</script>
上例,我们把全局注册的ccc组件,分别显示在id为box1和box2的元素下,所以第7行的<ccc>组件就不会被编译解释.
全局组件与局部组件:
全局组件:用Vue.component注册的组件叫全局组件
局部组件: 把组件注册到另一个组件(C)的里面,叫局部组件,这个组件只能在C下面使用
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<script>
var c = Vue.extend({
template : '<h3>这是标题</h3>'
});
new Vue({
el : '#box2',
components : { //注册局部组件, 只能在#box2下面使用
"ccc" : c
}
});
</script>
上例,id为box1下面的ccc组件不会被编译解释,因为ccc组件被注册为vue实例(根组件)下面的一个局部组件, 而这个局部组件又被显示在id为box2下面.
父组件与子组件:
<div id="box">
<bbb></bbb>
</div>
<script>
var a = Vue.extend({
template: '<h3>我是组件a</h3>'
});
var b = Vue.extend({
template: '<h3>我是组件b</h3><aaa></aaa>',
components: { //把a组件注册在b组件的下面
"aaa" : a
}
});
Vue.component( "bbb", b );
new Vue({
el : "#box"
});
</script>
上例,用Vue.extend构造了两个组件,一个<aaa> 一个 <bbb>, 而<aaa>组件又被注册在<bbb>组件里面,所以是<bbb>的子组件.
运行原理:
首先在第2行发现<bbb></bbb>组件, 然后在第14行寻找到<bbb>组件的对应内容为b 也就是
<h3>我是组件b</h3><aaa></aaa>
然后,又发现了<aaa>,然后在第11行找到<aaa>组件的对应内容为a 于是用a的模板内容 <h3>我是组件a</h3> 替换<aaa>组件,所以上面这段内容就变成
<h3>我是组件b</h3><h3>我是组件a</h3>
简化全局组件的注册方式:
可以把组件的构造与注册用Vue.component简写
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component( 'aaa', {
template : '<h3>我是标题</h3>' //同时创建与注册, 会自动调用Vue.extend
});
new Vue({
el : "#box"
});
</script>
简化局部组件的注册方式:
<div id="box">
<aaa></aaa>
<bbb></bbb>
<bbb></bbb>
</div>
<aaa></aaa>
<bbb></bbb>
<script>
new Vue({
el: '#box',
components: {
aaa: {
template: '<h3>我是a组件</h3>'
},
bbb: {
template: '<h3>我是b组件</h3>'
}
}
});
</script>
上例,第6行和第7行不会被编译解释,因为<aaa>组件和<bbb>组件被指定在id为box的元素下面编译显示
<script>标签分离模板内容
<div id="box">
<aaa></aaa>
<bbb></bbb>
</div>
<script type="x-template" id="a">
<h3>我是a组件</h3>
<p>我是段落a</p>
</script>
<script type="x-template" id="b">
<h3>我是b组件</h3>
<p>我是段落b</p>
</script>
<script>
new Vue({
el : '#box',
components : {
"aaa" : {
template : '#a' //找到id为a的模板, 把他的内容进行编译
},
"bbb" : {
template : '#b'
}
}
});
</script>
在<script>标签中指定type为x-template就不会认为 <script>标签之间的内容是javascript代码,而是被当做组件模板
运行原理:
在第2行发现<aaa>组件,然后在第17行发现<aaa>组件定义的模板template指定了一个id为a的<script>标签模板,所以用id为a的<script>模板里面的内容去替换组件<aaa>
第3行的组件<bbb>同上
用template分离模板内容
<div id="box">
<aaa></aaa>
<bbb></bbb>
</div>
<template id="a">
<h3>我是a组件</h3>
<p>我是段落a</p>
</template>
<template id="b">
<h3>我是b组件</h3>
<p>我是段落b</p>
</template>
<script>
new Vue({
el : '#box',
components : {
"aaa" : {
template : '#a' //找到id为a的模板, 把他的内容进行编译
},
"bbb" : {
template : '#b'
}
}
});
</script>
运行原理同上,只不过把模板标签从<script>换成<template>
[js高手之路] vue系列教程 - 组件定义与使用上部(7)的更多相关文章
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- [js高手之路] vue系列教程 - 实现留言板todolist(3)
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
随机推荐
- 【TCP/IP详解 卷1:协议】 第18章TCP连接的建立与终止
img { border: 1px solid black } T C P是一个面向连接的协议.无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接. RST:复位连接,将连接重置,一般用在 ...
- 如何使用slice,substr代替substring(原创)
//写这个是为了加深对substring和slice的理解 substring: 任何一个参数小于0,都会被替换成0.两个参数,最小值会被当做start,最大值当做end. 参数 描述 start 必 ...
- mysql中的limit
mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...
- Jmeter之分布式测试
1)Jmeter 是纯java 应用,对于CPU和内存的消耗比较大,并且受到JVM的一些限制: 一般情况下,依据机器配置,单机的发压量为300-600,因此,当需要模拟数以千计的并发用户时,使用单台机 ...
- 网络请求工具类WebServiceUtils
如果对WebService一无所知的话,建议先看看这两篇博客,对你WebService很有帮助. http://blog.csdn.NET/eyu8874521/article/details/912 ...
- java操作DBF的使用
1.引入javadbf.4.1.jar 2. import com.linuxense.javadbf.DBFField; import com.linuxense.javadbf.DBFRead ...
- 大三仍是Linux系统小白的我给大家讲讲学习历程
我与Linux结缘是在大三的时候.我与Linux熟识是在偶然遇到<Linux就该这么学>的时候.因为我是电子信息工程专业,在高年级时开设了嵌入式课程,嵌入式系统是一种专用的计算机系统,作为 ...
- ES6正则表达式扩展
前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES ...
- Log4Net(一):快速入门
概览 Log4Net是Apache Log4J框架在.NET平台上的实现,它是一个帮助开发者将日志信息以多种方式(数据库.控制台.文件等)输出的开源工具. 为什么要使用日志记录 提供应用程序运行时状态 ...
- SetConsoleTextAttribute 函数--设置控制台文本属性
SetConsoleTextAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686047(v=vs. ...