[js高手之路] vue系列教程 - 组件定义与使用上部(7)
2017-08-18 11:14
1156 查看
组件是vue框架比较核心的内容,那么什么是组件呢?
通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用
组件的基本用法:
组件的编译解释原理:
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的元素下会被编译解释.
上例,我们把全局注册的ccc组件,分别显示在id为box1和box2的元素下,所以第7行的<ccc>组件就不会被编译解释.
全局组件与局部组件:
全局组件:用Vue.component注册的组件叫全局组件
局部组件: 把组件注册到另一个组件(C)的里面,叫局部组件,这个组件只能在C下面使用
上例,id为box1下面的ccc组件不会被编译解释,因为ccc组件被注册为vue实例(根组件)下面的一个局部组件, 而这个局部组件又被显示在id为box2下面.
父组件与子组件:
上例,用Vue.extend构造了两个组件,一个<aaa> 一个 <bbb>, 而<aaa>组件又被注册在<bbb>组件里面,所以是<bbb>的子组件.
运行原理:
首先在第2行发现<bbb></bbb>组件, 然后在第14行寻找到<bbb>组件的对应内容为b 也就是
然后,又发现了<aaa>,然后在第11行找到<aaa>组件的对应内容为a 于是用a的模板内容 <h3>我是组件a</h3> 替换<aaa>组件,所以上面这段内容就变成
简化全局组件的注册方式:
可以把组件的构造与注册用Vue.component简写
简化局部组件的注册方式:
上例,第6行和第7行不会被编译解释,因为<aaa>组件和<bbb>组件被指定在id为box的元素下面编译显示
<script>标签分离模板内容
在<script>标签中指定type为x-template就不会认为 <script>标签之间的内容是javascript代码,而是被当做组件模板
运行原理:
在第2行发现<aaa>组件,然后在第17行发现<aaa>组件定义的模板template指定了一个id为a的<script>标签模板,所以用id为a的<script>模板里面的内容去替换组件<aaa>
第3行的组件<bbb>同上
用template分离模板内容
运行原理同上,只不过把模板标签从<script>换成<template>
通俗点讲:组件是由一堆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系列教程 - 实现留言板todolist(3)
- Vue.js 系列教程 2:组件,Props,Slots
- Vue.js 系列教程 2:组件,Props,Slots
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- Vue.js 系列教程 2:组件,Props,Slots
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路] vue系列教程
- Vue.js组件使用开发实例教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
- 【IMWeb训练营作业】vue.js-组件的定义及使用
- Vue.js 系列教程 2:组件,Props,Slots
- [js高手之路] vue系列教程
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- Vue.js 系列教程 2:组件,Props,Slots
- [js高手之路] vue系列教程
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)