Vue(1) —— 前端核心技术分析

---

1.什么是Vue

    Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

    视图层只会设计HTML+CSS+JS，其他的什么都不管，视图就是用来展示给用户看的，刷新后台提供的数据的，我们只需要学习这一部分

    但是前端还需要用到网络通信和视图跳转和状态管理，其中网络通信vue使用axios、页面跳转vue使用vue-router、状态管理vue使用vuex来实现

---

2.前端3要素

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

---

3.结构层（HTML）

略

---

4.表现层（CSS）

    CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要写很多重复的选择器;
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;

    这就导致了我们在工作中无端增加了许多工作量，为了解决这个问题，前端开发人员会使用一种称之为[CSS预处理器]的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，大大提高了前端在样式上的开发效率。（例如页面在不同的时候有不同的需求，淘宝在双11和618的样式就会不一样）
    所以前端在真正开发的时候是不会去写CSS代码的，而是使用CSS预处理器去编写代码，然后编译运行导出对应的CSS代码即可使用

---

5.CSS预处理器

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

常用的CSS预处理器有哪些

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

---

6.行为层（JavaScript）

    JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

    Native原生JS开发
    原生JS开发，也就是让我们按照[ECMAScript] 标准的开发方式，简称是ES,特点是所有浏览器都支持。截止到当前博客发布时间，ES 标准已发布如下版本:

• ES3
• ES4 (内部,未征式发布)
• ES5 (全浏览器支持)
• ES6 (常用，当前主流版本: webpack打包成为ES5支持! )
• ES7
• ES8
• ES9 (草案阶段)

    区别就是逐步增加新特性

TypeScript

    TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程，由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)主导。
    该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法，需要编译后(编译成JS)才能被浏览器正确执行
    TypeScript和JavaScript的关系就和CSS与CSS预处理器的关系很像

---

7.JavaScript框架

    说到框架，我们就可以想到前面学习的SSM框架，所以所谓框架，就是对原生的操作的封装，框架把原生的操作封装为一个个的方法、配置文件等，让我们使用的时候不用花太多的时间在一些基础的代码编写上，而可以将我们的注意力集中于核心功能的开发，我们只需要调用封装的类、方法或配置文件就可以实现原来需要很多原生代码才能实现的功能

---

    下面介绍一些JavaScript的框架

• jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8；
• Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6)
• React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
• Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点，所以Vue支持MVVM模式，也支持虚拟化DOM操作【集大成者：既有前端特性(虚拟DOM操作)，又有后端特性(MVVM开发模式)，所以Vue是前后端人员都应该掌握的技能】
• Axios :前端通信框架；因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能
• 前端三大框架：Angular、React、Vue

---

Angular中的MVC对应与Java后台开发的MVC3层架构

• M
  • 后端：Model层
  • 前端：Model层
• V
  • 后端View层：JSP
  • 前端View：HTML+CSS，就是现在流行使用的前端框架，一个空壳子
• C
  • 后端Controller层
  • 前端VM层，数据双向绑定

MVC – >(对应) MVVM

---

8.UI框架

• Ant-Design:阿里巴巴出品，基于React的UI框架
• ElementUI、 iview、 ice: 饿了么出品，基于Vue的UI框架
• Bootstrap: Twitter推出的一个用于前端开发的开源工具包
• AmazeUI:又叫"妹子UI"，一款HTML5跨屏前端框架.

---

9.JavaScript 构建工具

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

注：以上知识点将WebApp开发所需技能全部梳理完毕