-
Vue.js 简介
-
传统网页开发步骤
-
- 请求数据
-
- 生成结构
-
- 监听变化
-
- 元素变化
-
- 发送请求
-
- 更新结构
-
传统网页开发的弊端
- DOM操作频繁,代码繁杂
- DOM操作与逻辑代码混合,可维护性差
- 不同功能区域书写在一起,可维护性低
- 模块之间的依赖关系复杂
-
-
Vue.js 核心特性
-
数据驱动视图
-
组件化开发
-
数据驱动视图
- 数据变化会自动更新到对应元素中,无需手动操作DOM
- 对于输入框等可输入的元素,可设置双向数据绑定
- Vue.js的数据驱动视图,是基于M-V-VM模型实现
- MVVM 是一种软件开发思想
- Model: 代表数据
- View : 代表视图模板
- ViewModel: 代表业务逻辑处理的代码
-
优点
- 基于MVVM 实现的数据驱动视图,解放了DOM操作
- View 与 Model 分离处理, 降低代码的耦合度
-
什么是耦合?
- 模块与模块之间很多是存在关联的,如果改动一个,其他若干模块都会发生改变,模块之间的关系越是紧密,独立性就越不好。(这种关系,我们称作: 耦合度)
-
什么内聚?
模块内部的代码,相互之间的联系越强,内聚就越高。 -
一个模块应该尽量去独立,独立的去完成一个功能! 如果有新的代码,非得引入到独立的模块中,建议拆分成多模块。
-
-
缺点:
- 但双向绑定时,Bug调试难度增大
- 大型项目中,V和M过多,维护成本过高。
组件化开发:
- 组件化开发,允许我们将网页中的功能,样式,标签封装成可复用的模块。每个模块之间是彼此独立但相互联系的 -
Vue入门
最新推荐文章于 2024-02-07 00:00:00 发布