Vue组件开发,个人博客页面demo

组件化开发

首先,组件化开发不是前端所特有的东西。就我个人的理解而言。首先,从字面上去看,组件化开发:也就是将整体分割成一个个小的组件,将整体进行细化就是组件化。 每一个组件都是一个个独立的个体,也就是说,在其他的需要用某一个组件的时候可以复用,大大的避免了重复写相同代码。 从这个地方,我们可以看出,组件化设计就是为了增加复用性、灵活性、提高系统的设计,提升开发效率。

组件化的演变

这一段呢,我是借鉴别人的说法,到时候自己理解清楚了再来说说自己的想法。
在早期的前端开发的过程中,我们会经常使用JQuery,不断地操作DOM,不断地发Ajax数据请求,不断地重复不断地反复。
然后呢,应该就是MV,思想了,我对MV*的开发思想其实主要还是停留在以前学ThinkPHP的时候的MVC思想, Model层控制数据、Controller层控制业务逻辑、View层控制页面 。结构按道理来说就比较清晰、明了了。
然后,在这个基础之上,就开始有了MVVM的开发思想,viewModel的引入,实现双向绑定,在视图改变的时候,其对应的数据也相应的改变,但是这种双向绑定的过程难免会出现的问题就是执行的效率问题,数据的更新效率会受比较大的影响。

组件化思想

  • 拆分代码
  1. 代码量拆分:300行左右就应该拆分,其实我觉得200左右就可以拆分了,当然这不是一个硬性的条件。
  2. 复用原则拆分:经常需要使用的代码部分建议拆分,比如说:我们经常使用的导航栏、侧边栏等等,可以拆分实现复用,这也是我认为的最重要的一点。
  3. 业务复杂性原则:业务逻辑比较复杂的代码就应拆分实现,无论是可读性还是可维护性都是一种提升。
  • 带来的问题(涉及到的一些问题还是比较复杂的)
  1. 组件的状态管理(vuex)
  2. 多组件的混合使用,多页面,复杂的业务(vue-router)
    3.组件之间的传参、消息、事件管理(props、emit/on、bus)

我的组件化开发

准备实现一个练手的基本的博客的首页demo

  1. 初步实现(由于事件还是比较紧的,所以就准备大致写一个)

    大体上就分成了头部,主体和尾部,然后选择一步一步开发
<div class="article">
      <div class="content">
        <div class="art">
          <div class="art_img">
            <i
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值