在项目中,组件无处不在,可以通过对组件功能的封装,像搭积木一样开发网页。
一、组件化开发
比如 button 就是一个组件,前端页面会加上边框和鼠标悬停等样式,还可以使用 click 事件出发函数等。只不过这是浏览器封装好的组件,在编辑代码的任何地方,只需要使用如下代码,就能在前端页面显示一个按钮。
<button> BUTTON </button>
除了浏览器自带的组件外,Vue 还允许我们自定义组件,把一个功能模板 (template)封装在一个 .vue 文件中。把每个组件的逻辑和样式(JavaScript、HTML、CSS)封装在一起,方便项目中复用整个组件的代码。实际开发项目中有导航、侧边栏、表格、弹窗等组件。
Vue 已经把组件化的机制现实得很好了,只需要在这个基础之上,就能去掌握和学习组件化,在使用上的设计理念。这样做的目的就是实现高效的代码复用。我们可以把组件分成两个类型,通用组件、业务型组件。
组件的开发需要考虑代码的复用性,会比通常的业务开发要求更高,需要有更好的可维护性和稳定性的要求。
二、渲染评级分数
实现简单的评级需求,如下代码,rate 是 1 到 5 的整数,通过 slice 方法,可以直接渲染对应的星星。
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate)
每个组件渲染的内容并不完全一样,这是在写组件时的首先确认的内容。每个组件在项目中的不同地方,会渲染不同的内容。
未完待续...