第九节:掌握vue的另一个核心:组件
2018-03-21 09:32
363 查看
我们在之前的章节,已经详细地介绍了vue的数据驱动,从这一节开始,我们就来学习另一个核心:组件。
[align=left]组件是我们人为地把页面合理地拆分成一个个区块,让这些区块更方便我们重复使用,有了组件,我们可以更高效合理地开发和维护我们的项目。[/align][align=left]竟然说得组件那么好用,那我们就来好好学学怎么使用它。[/align]
[align=left]规划组件[/align][align=left]假设我们页面上有这样的一个布局:[/align]
[align=left]上图是我们模仿微信公众号的“历史消息”的界面,我们看到的是一个文章的目录列表。[/align]
[align=left]这种情况下,我们把每一个文章标题区块看作一个组件来进行规划,这样就方便我们去复用这个组件:[/align]
[align=left]实现组件[/align][align=left]我们学会了如何规划出一个组件,接下来,我们看看在vue中如何实现一个组件。[/align]
[align=left]我们用传统的实现方式一个组件,html代码如下:[/align]<div class="unit">
<div class="content">
<h1>这里是文章的标题</h1>
<div class="info">
<span>2017年4月10日</span>
<span class="original">原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>
复制代码[align=left]忽略css(这里我们不介绍css),我们看到了上面html代码结构,class为unit的<div>容器以及它的子孙节点组成了我们的组件。在vue组件中,这些代码将作为我们组件的模板template。[/align][align=left]
[/align][align=left]什么意思?我们来看看vue如何实现一个组件的。[/align]
[align=left]首先,我们还是先创建一个vue实例,很熟练了,没难度。[/align]<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
});
</script>
复制代码[align=left]成功创建了一个vue实例vm,挂载元素为id为app的div节点。[/align]
[align=left]接下来,我们在创建实例vm之前,利用vue提供的API来注册一个组件。稍微修改一下上面的代码:[/align]<div id="app"></div>
<script>
Vue.component('my-article',{
template:`<div>
<div>
<h1>这里是文章的标题</h1>
<div>
<span>2017年4月10日</span>
<span>原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
复制代码[align=left]我们使用了vue提供的全局API Vue.component() ,注册了一个名为:“my-article”的组件,而组件的template正好是我们上面的html代码,这样,我们就可以用 <my-article></ my-article> 的方式来使用我们的组件。[/align][align=left]注意:一定要确保实例vm在创建之前, <my-article> 组件已经被成功注册,这也是为什么我们要把代码写在实例化之前。[/align]
[align=left]既然注册了组件 <my-article> ,我们就来使用这个自定义的组件:[/align]<div id="app">
<my-article></my-article>
</div>
复制代码[align=left]我们看看渲染的结果:[/align]
[align=left]我们看到最终渲染的不是标签<my-article></my-article>,而是我们组件的模板template的值。我们成功地注册一个自定义的组件并使用它。[/align][align=left]
[/align][align=left]但这并不够,我们有的文章目录中不仅仅只有一篇文章,而且每篇文章的标题和日期都不一样,我们如何动态地展示它们的数据呢?[/align][align=left]
[/align][align=left]这里就涉及到了组件的传参props,没错,不但函数可以接受参数,vue的组件也可以。接下来,我们看看怎么实现传参。[/align]
[align=left]我们知道,组件中的这4部分是需要动态获取数据的:标题,发布日期,是否原创,文章封面图。[/align]
[align=left]那么,我们就通过传参的方式把这些数据传到组件,实现数据动态展示。[/align]
[align=left]首先,我们把数据存储在实例vm的data中:[/align]let vm = new Vue({
el:"#app",
data:{
article:{
title:"第一节:Vue.js框架是什么,
为什么选择它?",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
}
}
});
复制代码[align=left]我们给data增加了一个文章article的信息,包括:标题title,发布日期date,是否原创is_original,封面图片cover_url。[/align]
[align=left]文章的信息有了,我们怎么传到组件中去呢?[/align]<div id="app">
<my-article :detail="article"></my-article>
</div>
复制代码[align=left]就像一个函数传参一样,你可以把detail理解成一个形参,article相当于实参。[/align][align=left]
[/align][align=left]我们给组件传了参,组件内部怎么接受并使用呢?我们接着看,十分简单![/align]
[align=left]我们把注册组件的代码稍微修改一下:[/align]Vue.component('my-article',{
props:['detail'],
template:`<div>
<div>
<h1>{{detail.title}}</h1>
<div>
<span>{{detail.date}}</span>
<span v-show="detail.is_original">原创</span>
</div>
</div>
<img :src="detail.cover_url" alt="">
</div>`
});
复制代码[align=left]除了template以外,我们增加了props,通过它来接受我们的参数detail,传进来之后,你可以在组件的模板template中使用它所接受的所有数据了。比如,我们传进来的数据包含着文章的信息:title,date,is_original,cover_url。[/align]
[align=left]读取文章的标题:[/align]<h1>{{detail.title}}</h1>
复制代码[align=left]读取文章的发布日期:[/align]<span>{{detail.date}}</span>
复制代码[align=left]读取文章是否原创,并通过 v-show 指令控制显示/隐藏:[/align]<span v-show="detail.is_original">原创</span>
复制代码[align=left]读取文章的封面图片地址:[/align]<img :src="detail.cover_url">
复制代码[align=left]竟然读取了数据,我们就看看渲染结果:[/align]
[align=left]数据是动态读取了,那么我们的目录并不仅仅只有一篇文章,当我们数据多了之后,该用什么方式展示出来呢?[/align]let vm = new Vue({
el:"#app",
data:{
articles:[
{
title:"第一节:Vue.js框架是什么,
为什么选择它?",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第二节:简易安装 和
快速入门Vue.js",
date:" 2017年03月09日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第三节:创建一个Vue实例,
超简单",
date:" 2017年03月17日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第四节:定义一个vue实例的
4个常用选项",
date:" 2017年03月20日",
is_original:true,
cover_url:"cover.jpg"
},
]
}
});
复制代码[align=left]假设我们的articles中有4篇文章的信息。[/align][align=left]
[/align][align=left]也许你已经相当到了,我们可以使用 v-for 指令,它是专门用于处理列表渲染的指令。结合我们的组件,一起来实现这个文章目录的效果。[/align][align=left]
[/align][align=left]非常简单,组件我们已经封装好,我们只需要给它传参即可,所以我们不需要改动组件的代码。而articles是一个数组,我们用 v-for 指令对它进行遍历即可。[/align]
[align=left]我们对html代码稍微改动一下:[/align]<div id="app">
<my-article
v-for="item in articles"
:detail="item">
</my-article>
</div>
复制代码[align=left]代码很简单,我们在组件上加上了 v-for 指令,并遍历了articles。[/align][align=left]渲染结果:[/align]
9.jpg (26.61 KB, 下载次数: 0)下载附件2017-4-21 17:44 上传[align=left]本节小结[/align][align=left]掌握如何规划设计一个组件,注册以及其注意事项,运用组件与 v-for 指令实现列表渲染。[/align]
[align=left]组件是我们人为地把页面合理地拆分成一个个区块,让这些区块更方便我们重复使用,有了组件,我们可以更高效合理地开发和维护我们的项目。[/align][align=left]竟然说得组件那么好用,那我们就来好好学学怎么使用它。[/align]
[align=left]规划组件[/align][align=left]假设我们页面上有这样的一个布局:[/align]
[align=left]上图是我们模仿微信公众号的“历史消息”的界面,我们看到的是一个文章的目录列表。[/align]
[align=left]这种情况下,我们把每一个文章标题区块看作一个组件来进行规划,这样就方便我们去复用这个组件:[/align]
[align=left]实现组件[/align][align=left]我们学会了如何规划出一个组件,接下来,我们看看在vue中如何实现一个组件。[/align]
[align=left]我们用传统的实现方式一个组件,html代码如下:[/align]<div class="unit">
<div class="content">
<h1>这里是文章的标题</h1>
<div class="info">
<span>2017年4月10日</span>
<span class="original">原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>
复制代码[align=left]忽略css(这里我们不介绍css),我们看到了上面html代码结构,class为unit的<div>容器以及它的子孙节点组成了我们的组件。在vue组件中,这些代码将作为我们组件的模板template。[/align][align=left]
[/align][align=left]什么意思?我们来看看vue如何实现一个组件的。[/align]
[align=left]首先,我们还是先创建一个vue实例,很熟练了,没难度。[/align]<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
});
</script>
复制代码[align=left]成功创建了一个vue实例vm,挂载元素为id为app的div节点。[/align]
[align=left]接下来,我们在创建实例vm之前,利用vue提供的API来注册一个组件。稍微修改一下上面的代码:[/align]<div id="app"></div>
<script>
Vue.component('my-article',{
template:`<div>
<div>
<h1>这里是文章的标题</h1>
<div>
<span>2017年4月10日</span>
<span>原创</span>
</div>
</div>
<img src="cover.jpg" alt="">
</div>`
});
let vm = new Vue({
el:"#app",
});
</script>
复制代码[align=left]我们使用了vue提供的全局API Vue.component() ,注册了一个名为:“my-article”的组件,而组件的template正好是我们上面的html代码,这样,我们就可以用 <my-article></ my-article> 的方式来使用我们的组件。[/align][align=left]注意:一定要确保实例vm在创建之前, <my-article> 组件已经被成功注册,这也是为什么我们要把代码写在实例化之前。[/align]
[align=left]既然注册了组件 <my-article> ,我们就来使用这个自定义的组件:[/align]<div id="app">
<my-article></my-article>
</div>
复制代码[align=left]我们看看渲染的结果:[/align]
[align=left]我们看到最终渲染的不是标签<my-article></my-article>,而是我们组件的模板template的值。我们成功地注册一个自定义的组件并使用它。[/align][align=left]
[/align][align=left]但这并不够,我们有的文章目录中不仅仅只有一篇文章,而且每篇文章的标题和日期都不一样,我们如何动态地展示它们的数据呢?[/align][align=left]
[/align][align=left]这里就涉及到了组件的传参props,没错,不但函数可以接受参数,vue的组件也可以。接下来,我们看看怎么实现传参。[/align]
[align=left]我们知道,组件中的这4部分是需要动态获取数据的:标题,发布日期,是否原创,文章封面图。[/align]
[align=left]那么,我们就通过传参的方式把这些数据传到组件,实现数据动态展示。[/align]
[align=left]首先,我们把数据存储在实例vm的data中:[/align]let vm = new Vue({
el:"#app",
data:{
article:{
title:"第一节:Vue.js框架是什么,
为什么选择它?",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
}
}
});
复制代码[align=left]我们给data增加了一个文章article的信息,包括:标题title,发布日期date,是否原创is_original,封面图片cover_url。[/align]
[align=left]文章的信息有了,我们怎么传到组件中去呢?[/align]<div id="app">
<my-article :detail="article"></my-article>
</div>
复制代码[align=left]就像一个函数传参一样,你可以把detail理解成一个形参,article相当于实参。[/align][align=left]
[/align][align=left]我们给组件传了参,组件内部怎么接受并使用呢?我们接着看,十分简单![/align]
[align=left]我们把注册组件的代码稍微修改一下:[/align]Vue.component('my-article',{
props:['detail'],
template:`<div>
<div>
<h1>{{detail.title}}</h1>
<div>
<span>{{detail.date}}</span>
<span v-show="detail.is_original">原创</span>
</div>
</div>
<img :src="detail.cover_url" alt="">
</div>`
});
复制代码[align=left]除了template以外,我们增加了props,通过它来接受我们的参数detail,传进来之后,你可以在组件的模板template中使用它所接受的所有数据了。比如,我们传进来的数据包含着文章的信息:title,date,is_original,cover_url。[/align]
[align=left]读取文章的标题:[/align]<h1>{{detail.title}}</h1>
复制代码[align=left]读取文章的发布日期:[/align]<span>{{detail.date}}</span>
复制代码[align=left]读取文章是否原创,并通过 v-show 指令控制显示/隐藏:[/align]<span v-show="detail.is_original">原创</span>
复制代码[align=left]读取文章的封面图片地址:[/align]<img :src="detail.cover_url">
复制代码[align=left]竟然读取了数据,我们就看看渲染结果:[/align]
[align=left]数据是动态读取了,那么我们的目录并不仅仅只有一篇文章,当我们数据多了之后,该用什么方式展示出来呢?[/align]let vm = new Vue({
el:"#app",
data:{
articles:[
{
title:"第一节:Vue.js框架是什么,
为什么选择它?",
date:" 2017年03月06日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第二节:简易安装 和
快速入门Vue.js",
date:" 2017年03月09日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第三节:创建一个Vue实例,
超简单",
date:" 2017年03月17日",
is_original:true,
cover_url:"cover.jpg"
},
{
title:"第四节:定义一个vue实例的
4个常用选项",
date:" 2017年03月20日",
is_original:true,
cover_url:"cover.jpg"
},
]
}
});
复制代码[align=left]假设我们的articles中有4篇文章的信息。[/align][align=left]
[/align][align=left]也许你已经相当到了,我们可以使用 v-for 指令,它是专门用于处理列表渲染的指令。结合我们的组件,一起来实现这个文章目录的效果。[/align][align=left]
[/align][align=left]非常简单,组件我们已经封装好,我们只需要给它传参即可,所以我们不需要改动组件的代码。而articles是一个数组,我们用 v-for 指令对它进行遍历即可。[/align]
[align=left]我们对html代码稍微改动一下:[/align]<div id="app">
<my-article
v-for="item in articles"
:detail="item">
</my-article>
</div>
复制代码[align=left]代码很简单,我们在组件上加上了 v-for 指令,并遍历了articles。[/align][align=left]渲染结果:[/align]
9.jpg (26.61 KB, 下载次数: 0)下载附件2017-4-21 17:44 上传[align=left]本节小结[/align][align=left]掌握如何规划设计一个组件,注册以及其注意事项,运用组件与 v-for 指令实现列表渲染。[/align]
相关文章推荐
- Vue自定义组件(一)货币输入框
- Spring核心技术原理-(4)-三条路线告诉你如何掌握Spring IoC容器的核心原理
- Vue中的父子组件杂谈
- NGUI 基础 -- 核心组件
- web前端开发工程师需要掌握哪些核心技能?
- android一个组件控制另一个组件状态变化小技巧
- vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
- Vuex: 实现同级组件的简单通信
- vue 2.0 第一个坑,组件不显示的问题
- 核心Swing组件(四)
- React(12)组合(类似 Vue 组件的插槽)和继承
- vue组件与复用详解
- Ajax核心:XMLHTTP组件相关技术资料
- vue.js组件与组件之间的通信
- 核心Swing组件(五)
- 网络工程师成长秘籍:掌握企业核心业务
- Vue 组件(component)教程之实现精美的日历方法示例
- Vue.js 组件中的v-on绑定自定义事件理解
- Vue组件-组件的注册
- 利用vue实现模态框组件