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

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

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

原生js组件的实现

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

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

vue的组件

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

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

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

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

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

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

组件化开发之vue的更多相关文章

  1. Android插件化开发之OpenAtlas生成插件信息列表

    上一篇文章.[Android插件化开发之Atlas初体验]( http://blog.csdn.net/sbsujjbcy/article/details/47446733),简单的介绍了使用Atla ...

  2. Intent的七大组件——Android开发之路5

    ------Intent------ Android中三个核心组件——Activity.Services.BroadCastProvider都是通过Intent传递参数. startActivity( ...

  3. Wx-小程序-组件式开发之Vant

    开始:https://youzan.github.io/vant-weapp/#/intro 小程序开发者工具中 -->工具栏-->构建npm 一.初始化package.json npm ...

  4. Android开发之旅: Intents和Intent Filters（理论部分）

    引言 大部分移动设备平台上的应用程序都运行在他们自己的沙盒中.他们彼此之间互相隔离,并且严格限制应用程序与硬件和原始组件之间的交互. 我们知道交流是多么的重要,作为一个孤岛没有交流的东西,一定毫无意义 ...

  5. Android 开发之旅：深入分析布局文件&又是“Hello World！”

    http://www.cnblogs.com/skynet/archive/2010/05/20/1740277.html 引言 上篇可以说是一个分水岭,它标志着我们从Android应用程序理论进入实 ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  8. 大话大前端时代(一) —— Vue 与 iOS 的组件化

    序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...

  9. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

随机推荐

  1. [JZOJ3167] 【GDOI2013模拟3】查税

    题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx​+zx​∗(T−tx​) 有两个操作,修改某个位置上 ...

  2. poj 3660 Cow Contest (bitset+floyd传递闭包)

    传送门 解题思路 考试题,想到传递闭包了,写了个O(n^3)的,T了7个点...后来看题解是tm的bitset优化???以前好像没听过诶(我太菜了),其实也不难,时间复杂度O(n^3/32) #inc ...

  3. 转：Eclipse中设置编码的方式

    来源:http://blog.csdn.net/jianw2007/article/details/3930915 如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Ja ...

  4. 信息安全-浏览器-CORS：CORS（跨域资源共享）

    ylbtech-信息安全-浏览器-CORS:CORS(跨域资源共享) 1.返回顶部 1. CORS,全称Cross-Origin Resource Sharing,是一种允许当前域(domain)的资 ...

  5. 一行神奇的 javascript 代码

    写本篇文章的缘由是之前群里@墨尘发了一段js代码,如下: (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~ ...

  6. 04_springmvc注解开发

    一.注解开发 需求:1.进入商品查询列表页面. 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询),要修改的商品从数据库查询,根据商品id(主键)查询商品信息. 3.在商品修改页 ...

  7. <每日一题>题目16:简单的python练习题(1-10)

    #1.python程序中__name__的作用是什么? __name__这个系统变量用来表示程序的运行方式. 如果程序在当前膜快运行,__name__的名称就是__main__, 如果不在(被调用), ...

  8. C#控件的闪烁问题解决方法总结

    最近对代码作了一些优化,试验后效果还可以,但是发现界面会闪烁,具体是TreeView控件会闪烁,语言为C#,IDE为VS2005.在查阅一些资料,使用了一些基本技术后(如开启双缓冲),发现没什么效果. ...

  9. js 倒计时毫秒级别显示

    <html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...

  10. odoo many2one

    在xml中使many2one字段  不可点击 不可跳转 options="{'no_open': True, 'no_create': True}"