vue.js简介-01

目录

- 传统网页开发步骤

  - 传统网页开发的弊端

- Vue.js 核心特性

  - 数据驱动视图

  - 优点

  - 缺点：

  组件化开发：

---

- 传统网页开发步骤

  - 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 过多，维护成本过高。

  组件化开发：

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