组件是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)的更多相关文章

  1. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  2. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  3. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  4. [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  5. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  6. [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)

    一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...

  7. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  8. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  9. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

随机推荐

  1. 【TCP/IP详解 卷1:协议】 第18章TCP连接的建立与终止

    img { border: 1px solid black } T C P是一个面向连接的协议.无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接. RST:复位连接,将连接重置,一般用在 ...

  2. 如何使用slice,substr代替substring(原创)

    //写这个是为了加深对substring和slice的理解 substring: 任何一个参数小于0,都会被替换成0.两个参数,最小值会被当做start,最大值当做end. 参数 描述 start 必 ...

  3. mysql中的limit

    mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...

  4. Jmeter之分布式测试

    1)Jmeter 是纯java 应用,对于CPU和内存的消耗比较大,并且受到JVM的一些限制: 一般情况下,依据机器配置,单机的发压量为300-600,因此,当需要模拟数以千计的并发用户时,使用单台机 ...

  5. 网络请求工具类WebServiceUtils

    如果对WebService一无所知的话,建议先看看这两篇博客,对你WebService很有帮助. http://blog.csdn.NET/eyu8874521/article/details/912 ...

  6. java操作DBF的使用

    1.引入javadbf.4.1.jar 2. import com.linuxense.javadbf.DBFField;   import com.linuxense.javadbf.DBFRead ...

  7. 大三仍是Linux系统小白的我给大家讲讲学习历程

    我与Linux结缘是在大三的时候.我与Linux熟识是在偶然遇到<Linux就该这么学>的时候.因为我是电子信息工程专业,在高年级时开设了嵌入式课程,嵌入式系统是一种专用的计算机系统,作为 ...

  8. ES6正则表达式扩展

    前面的话 正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变.然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新.本文将详细介绍ES ...

  9. Log4Net(一):快速入门

    概览 Log4Net是Apache Log4J框架在.NET平台上的实现,它是一个帮助开发者将日志信息以多种方式(数据库.控制台.文件等)输出的开源工具. 为什么要使用日志记录 提供应用程序运行时状态 ...

  10. SetConsoleTextAttribute 函数--设置控制台文本属性

    SetConsoleTextAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686047(v=vs. ...