(一). 认识Vue.js
- Vue是一个渐进式的javascript框架
-
渐进式 【 越学越难 】
-
Vue的作者是 尤雨溪
-
Vue是一个个人项目 【 React是facebook的团队项目 】
-
Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】
-
Vue是一个单项数据流的框架
-
- Vue版本发布的时间
- Vue 1.x 2014
- Vue 2.x 2016 【 es6 vue 微信小程序 angular2.0 等开始火起来了 】
2. MVC
- MVC是一个软件架构思维,它将一个软件分为三个部分
- M Model 数据
- V View 视图
- C Controller 控制器
-
- MVC衍生
- mvc backbone 【 前端框架 】
- mvp
- mvvm Vue Angular.ts 【 Angular2.0】
- ember
3. MVVM
- M Model 数据
- V View 视图
- VM ViewModel 视图模型
V的变化会反应到VM上,反之同理,也就是vm的改变也会影响V
4 Vue学习思路
- Vue有指令和组件系统两个大功能
- 通过js想操作DOM - > Vue也想操作DOM
- 问题: Vue中不建议像二阶段一样直接去操作DOM
- 解决: 方案: 指令
- 使用形式:
- 绑定在dom的属性身上
- 为了区别自定义属性,vue提供的指令都携带 v-
- 数据展示
- v-html 非转义输出 , 可以解析 xml类型数据
- v-text
- 条件渲染
- v-if
- v-else-if
- v-else
- 条件展示
- v-show
- v-if vs v-show
- v-if是真正的控制dom的存在与否,v-show 是控制dom的display:none属性
- 如果初始条件都为false,v-if会惰性渲染【 不渲染 】,但是v-show不管条件是什么都会渲染,所以v-show的初始渲染开销较高
- 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show , 反之,使用v-if
(二)MVC,MVP,MVVM
MVC是最经典的开发模式之一,最早是后台那边来的,后台前端的复杂度也上来了,MVC的开发模式也带进前端了。
MVC有两个很明显的问题:
1.m层和v层直接打交道,导致这两层耦合度高(是一种软件度量,是指一程序中,模块及模块之间信息或参数依赖的程度。)
2.因为所有逻辑都写在c层,导致c层特别臃肿
为了解决这两个问题,MVC的变种模式出现了MVP和MVVM.
mvp
p层代替了c层,v层和m层的交互被p层隔断,从理论上去除了v和m层的耦合
但是造成p层比原来的c层更加臃肿,为了缓解这种臃肿,MVVM出现了
mvvm
简单的来说MVVM其实就是MVP中把P层削弱为VM层,部分简单的逻辑职责分给了View层。
例如ng中的ng-if,ng-for…其实就是V层上的简单逻辑,这样做使得VM层相比起P层就没有这么臃肿了
MVVM中View Model和Model是相互的,一方改动,另一方也会随之变化,Vue的无刷新更新页面就是源于此