前端inn
公众号ID:前端inn
关注
作者:阿良
编辑:煜喵喵不爱喝酒
上次我们学习了关于Vue的一些基本指令和用法,相信你对Vue已经有了一些了解。本节阿良给大家讲解Vue的基础用法之组件封装、组件传参、动态绑定style和class。
在我们开发网站的时候,网站一般都会有一些共同的部分,比如导航栏、搜索框、版权信息等。
单纯的HTML是没有include这个功能的,如果使用nginx,对一些新手又不太友好。
当然,你可以在每个页面都复制一遍这些内容,或者使用iframe标签去引入共同的html文件,但是这样并不是最优解。
而Vue则可以帮我们简单实现这个功能。
具体是如何实现该功能的呢?重点重点!???
我们可以使用Vue将这些共同的内容封装成一个一个的小组件,在需要的地方直接引入组件就可以了。
(是不是超级简单)
现在让我们上手实践一下
Vue.component('module-one', { template: '这是一个组件' }) var app = new Vue(...)
此时显示的内容为
· 这是一个组件
现在我们已经学会了封装组件,但是这并不足以应付我们的日常开发。
下面我们来学习给组件传参???
v-for="item in dataList"
v-bind:data="item"
v-bind:key="item.text"
>
Vue.component('module-one', { props: ['data'], template: '{{ data.text }}' }) var app = new Vue({ el:"#app", data:{ dataList: [ { text: '数据1' }, { text: '数据2' }, { text: '数据3' } ] } })
此时,我们的组件就接收到了传来的参数。
当我们需要对一段数据进行处理再展示的时候,我们需要在标签内部的{{data.xxxxxxxx}}进行一系列操作,这无疑为代码增加了负担。这个时候,计算属性出现了(computed)。
当然,过滤器也可以使用,我们之后会讲解过滤器,目前暂时不谈。
举个“?”
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } }})
此时,计算属性已经帮我们解决了运算。只有当data中的message发生变化的时候,计算属性中的reversedMessage才会发生变化。
当需要在数据变化时执行异步或开销较大的操作时,计算属性就不是很够用了,这个时候,我们可以使用侦听器watch。
大家可以自己看一下侦听器,我们下次再讲。(阿良会结合内容多寡安排讲解)
最后,给大家介绍一下如何动态绑定style和class?
动态绑定style和class,可以用对象语法,也可以用数组语法
以下是绑定class的“?”
//对象语法//根据isActive的值(true/false)//来判断active这个class选择器的效果是否生效//多个class可用逗号隔开//可用单引号写一些非动态内容//--------------------------------------------------//数组语法data: { activeClass: 'active', errorClass: 'text-danger'}//可以把已有的class样式赋值给变量//以数组的形式绑定在class属性中//在其中,也可以使用一些三目运算符,解决一下常用的需求
以下是绑定style的“?”
data: { activeColor: 'red', fontSize: 30}//这里我们更建议将内容封装在一个对象中,使代码可读性更强data: { styleObject: { color: 'red', fontSize: '13px' }}//数组用法,与class用法一致
今天的内容就到此结束了,有疑问记得在下方留言哦!
//阿良引用了官网的部分代码,是因为目前学习的内容过于基础,在实际开发中的需求并不是使用当前简单的解决办法。请不要介意我们对官网的引用,我们更乐意的是将我们已经会的内容讲解给您,而不是创造一个比官网更好的文档。
若您对前端开发有兴趣请关注前端inn
遇到问题,请联系我们 QQ群:1141255876
求分享
求点赞
求在看