vue入门笔记-01- | 刘民锴的个人博客

学习笔记

发布日期: 2020-08-08

更新日期: 2021-01-12

文章字数: 1.5k

阅读时长: 5 分

阅读次数:

Vue：前端体系、前后端分离.

1、概述.

Vue 是一套用于构建用户界面的渐进式框架(逐步实现新特性)，发布于2014年2月，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层（给用户看刷新后台数据），不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合

综合了Angular（模块化）和React（虚拟DOM）的优点；

Axios：前端通信的框架

Soc原则：关注点分离原则

官网：https://cn.vuejs.org/

MVC（同步通信为主）：Model，View、Controller

MVP（异步通信为主）：Model、View、Presenter

MVVM（异步通信为主）：Model、View、ViewModel

2、前端三要素.

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
JavaScript（行为）：一种弱类型的脚本语言，其源代码不需要经过编译，而是有浏览器解释运行，用于控制网页的行为

3、CSS预处理器.

css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。转化成通俗易懂的话来说就是“ 用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用 ”

常用的CSS预处理器.

SASS：基于Ruby，通过服务端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度大高于LESS
LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS，但在实际的开发中足够了，所以我们后台人员如果需要的话，建议使用LESS

4、JavaScript.

Native原生JS开发.

原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。

ES3
ES4（内部，未正式公布）
ES5（全浏览器支持）
ES6（常用，当前主流版本：webpack打包成为ES5支持）
ES7
ES8
ES9
ES10（2020）

他们之间的区别就是逐步增加新特性

TypeScript 微软的标准.

TypeScript是一种由微软开发的开源、跨平台的编程语言。
它是JavaScript的超集，支持 ECMAScript 6 标准，最终会被编译为JavaScript代码。
TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

语言特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法

5、UI框架.

Ant-Design，ice：阿里巴巴出品，基于React的UI框架
ElementUI、iview：饿了么出品，基于Vue的UI框架
Bootstrap：推特推出的一个用于前端开发的开源工具包
AmazeUI：一款HTML5跨屏前端框架

6、JavaScript构建工具.

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

7、MVVM模式.

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM（HTML操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
- 能够观察到数据的变化，并对视图对应的内容进行修改
- 能过监听到视图的变化，并能够通知数据发生改变

什么是MVVM？.

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行的 WPF）的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。

MVVM源自于经典的MVC（Model-View-Controller）模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变的更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

为啥要使用MVVM？.

和MVC一样，为了将View和Model分离

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面的设计（VIew）
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。