Vue.js 核心特性

本文探讨了传统网页开发的步骤和弊端,如DOM操作频繁导致的代码复杂性,以及Vue.js如何通过数据驱动视图和组件化开发来解决这些问题。Vue.js的核心特性包括自动更新视图、双向数据绑定和MVVM模型,降低了DOM操作和提高了代码可维护性。同时,组件化开发实现了模块的独立与复用,降低了耦合度。然而,Vue.js的双向绑定可能增加调试难度,大型项目中维护成本也可能提高。
摘要由CSDN通过智能技术生成

 - 传统网页开发步骤

    - 1. 请求数据

    - 2. 生成结构

    - 3. 监听变化

    - 4. 元素变化

    - 5. 发送请求

    - 6. 更新结构

   - 传统网页开发的弊端

     - DOM操作频繁,代码繁杂

     - DOM操作与逻辑代码混合,可维护性差

     - 不同功能区域书写在一起,可维护性低

     - 模块之间的依赖关系复杂

  - Vue.js 核心特性

       - 数据驱动视图

       - 组件化开发

    

       - 数据驱动视图

          - 数据变化会自动更新到对应元素中,无需手动操作DOM

          - 对于输入框等可输入的元素,可设置双向数据绑定

          - Vue.js的数据驱动视图,是基于M-V-VM模型实现

          - MVVM  是一种软件开发思想

             - Model:  代表数据

             - View :  代表视图模板

             - ViewModel: 代表业务逻辑处理的代码

        - 优点

            - 基于MVVM 实现的数据驱动视图,解放了DOM操作

            - View 与 Model 分离处理, 降低代码的耦合度

                - 什么是耦合?

                   - 模块与模块之间很多是存在关联的,如果改动一个,其他若干模块都会发生改变,模块之间的关系越是紧密,独立性就越不好。(这种关系,我们称作: 耦合度)

                -  什么内聚?

                模块内部的代码,相互之间的联系越强,内聚就越高。

                  - 一个模块应该尽量去独立,独立的去完成一个功能! 如果有新的代码,非得引入到独立的模块中,建议拆分成多模块。

        - 缺:

            - 但双向绑定时,Bug调试难度增大

            - 大型项目中,V和M过多,维护成本过高。

    组件化开发:

            - 组件化开发,允许我们将网页中的功能,样式,标签封装成可复用的模块。每个模块之间是彼此独立但相互联系的

            

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值