Vue中如何像积木一样开发网页

在项目中，组件无处不在，可以通过对组件功能的封装，像搭积木一样开发网页。

一、组件化开发

比如 button 就是一个组件，前端页面会加上边框和鼠标悬停等样式，还可以使用 click 事件出发函数等。只不过这是浏览器封装好的组件，在编辑代码的任何地方，只需要使用如下代码，就能在前端页面显示一个按钮。

<button> BUTTON </button>

除了浏览器自带的组件外，Vue 还允许我们自定义组件，把一个功能模板 （template）封装在一个 .vue 文件中。把每个组件的逻辑和样式（JavaScript、HTML、CSS）封装在一起，方便项目中复用整个组件的代码。实际开发项目中有导航、侧边栏、表格、弹窗等组件。

Vue 已经把组件化的机制现实得很好了，只需要在这个基础之上，就能去掌握和学习组件化，在使用上的设计理念。这样做的目的就是实现高效的代码复用。我们可以把组件分成两个类型，通用组件、业务型组件。

组件的开发需要考虑代码的复用性，会比通常的业务开发要求更高，需要有更好的可维护性和稳定性的要求。

二、渲染评级分数

实现简单的评级需求，如下代码，rate 是 1 到 5 的整数，通过 slice 方法，可以直接渲染对应的星星。

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate)

 每个组件渲染的内容并不完全一样，这是在写组件时的首先确认的内容。每个组件在项目中的不同地方，会渲染不同的内容。

未完待续...