组件化开发之vue

今天写了写vue的组件化开发demo,有些小的心得。分享一下。

组件化意味着代码可以复用,调用组件就可以了。然后可以通过组件调用组件的相关能力。

例如以前我做组件化开发的一个小项目

原生js组件的实现

这就是一个网站了,网站分割成以页面为一级单位,组件为二级单位的一个格局,然后调用addPage(),addComponent()方法即可去生成网站,当然为了实现这个想法,我花了大概一周的时间,而且用了fullpage和jquery,如果用js去开发的话估计是上天的节奏。看完这个我觉得我的组件更类似于插件,因为这个组件集成的功能太多了

这是其中的一个页面,组件实现了动画,dom,数据,重点是和fullpage是严重耦合的。也不能说不可以耦合,就是不好这个组件库限制多了一层。不好去使用他了。

vue的组件

vue做得比较不错的一点就是组件化开发,废话不多说,直接上代码

 

首先假如后台取到的数据是这个样子的,而我们生成的代码是下边那种。

 

于是乎我们就会去写代码,下边那种,两个组件,注入两条数据。

 

组件下边那样子,通过v-for去拿到数据,展示出来

 

然后vue中间结合,把数据放入作用域,作用域内可以调用数据。

这样就搞定了,模板搭建,提供数据接口,vue把数据写入作用域,作用域内的组件拿到数据就ok了。然后形成html+数据的组件开发

原文地址:https://www.cnblogs.com/sowhite/p/6487269.html