大前端进阶：vue

目录

1.vue概述与前端知识体系

1.vue概述

2.前端三要素

2.前端发展史

1.三端统一

2.后端技术

3.了解前后分离的演变史

1.后端为主的MVC时代

2.基于AJAX带来的SPA时代

3.前端为主的MV*时代

4.Node JS带来的全栈时代

5.总结

4.第一个Vue程序

1.什么是MVVM

2.为什么要使用MVVM

3.Vue

4.第一个Vue程序

5.基础语法指令

1.v-bind

2.v-if， v-else

3.v-for

4.v-on 事件绑定

6.表单双绑和组件

1.什么是双向数据绑定

2.在表单中使用双向数据绑定

3.什么是组件

7.Axios异步通信

1.什么是Axios

2.第一个Axios应用程序

3.Vue的生命周期

8.计算属性-内容分发-自定义事件

1.什么是计算属性

2.内容分发

3.自定义事件

4.Vue入门小结

9.第一个vue-cli项目

1.什么是vue-cli

2.需要的环境

3.第一个vue-cli应用程序 

10.webpack使用

1.什么是Webpack

2.安装Webpack

3.使用webpack

11.vue-router路由

1.说明

2.安装

3.测试

12.实战快速上手

1.创建工程

2.创建登录页面

3.路由嵌套

4.参数传递

5.组件重定向

6.路由模式与 404

---

1.vue概述与前端知识体系

1.vue概述

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

2.前端三要素

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

结构层（HTML）

略

表现层（CSS）

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

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

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

CSS预处理器

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

常用的CSS预处理器有哪些

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

行为层（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)才能被浏览器正确执行。

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)的优点;
• Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

2.前端发展史

UI框架

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

JavaScript 构建工具

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

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

1.三端统一

混合开发（Hybid App）

 主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、 摄像头等)，打包方式主要有以下两种:

• 云打包: HBuild -> HBuildX， DCloud出品; API Cloud
• 本地打包: Cordova (前身是PhoneGap)

2.后端技术

 前端人员为了方便开发也需要掌握一定的后端技术， 但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。

 NodeJS的作者已经声称放弃NodeJS (说是架构做的不好再加上笨重的node_ modules，可能让作者不爽了吧)，开始开发全新架构的Deno

 既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS 框架及项目管理工具如下:

• Express: NodeJS框架
• Koa: Express简化版
• NPM:项目综合管理工具，类似于Maven
• YARN: NPM的替代方案，类似于Maven和Gradle的关系

3.了解前后分离的演变史

为什么需要前后分离

1.后端为主的MVC时代

    为了降低开发的复杂度， 以后端为出发点， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC时代；

以SpringMVC流程为例：

• 发起请求到前端控制器(Dispatcher Servlet)
• 前端控制器请求HandlerMapping查找Handler，可以根据xml配置、注解进行查找
• 处理器映射器HandlerMapping向前端控制器返回Handler
• 前端控制器调用处理器适配器去执行Handler
• 处理器适配器去执行Handler
• Handler执行完成给适配器返回ModelAndView
• 处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一个底层对象，包括Model和View
• 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(JSP)
• 视图解析器向前端控制器返回View
• 前端控制器进行视图渲染，视图渲染将模型数据(在ModelAndView对象中)填充到request域
• 前端控制器向用户响应结果

优点

MVC是一个非常好的协作模式， 能够有效降低代码的耦合度从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹， 还可以使用Thyme leaf、Frree marker等模板引擎， 使模板里无法写入Java代码， 让前后端分工更加清晰。

缺点

• 前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：
  • 第一种是前端写DEMO， 写好后， 让后端去套模板。好处是DEMO可以本地开发， 很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大；
  • 另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。
• 前后端职责纠缠不清：模板引擎功能强大，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码，还有一个很大的灰色地带是Controller， 页面路由等功能本应该是前端最关注的， 但却是由后端来实现。Controller本身与Model往往也会纠缠不清，看了让人咬牙的业务代码经常会出现在Controller层。这些问题不能全归结于程序员的素养， 否则JSP就够了。
• 对前端发挥的局限性：性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作，但由于后端框架限制，我们很难使用[Comet】、【Big Pipe】等技术方案来优化性能。

    注：在这期间(2005年以前) ， 包括早期的JSP、PHP可以称之为Web 1.0时代。在这里想说一句， 如果你是一名Java初学者， 请你不要再把一些陈旧的技术当回事了， 比如JSP， 因为时代在变、技术在变、什么都在变(引用扎克伯格的一句话：唯一不变的是变化本身)；当我们去给大学做实训时，有些同学会认为我们没有讲什么干货，其实不然，只能说是你认知里的干货对于市场来说早就过时了而已

2.基于AJAX带来的SPA时代

    时间回到2005年A OAX(Asynchronous JavaScript And XML， 异步JavaScript和XML，老技术新用法)被正式提出并开始使用CDN作为静态资源存储， 于是出现了JavaScript王者归来(在这之前JS都是用来在网页上贴狗皮膏药广告的) 的SPA(Single Page Application) 单页面应用时代。

优点

这种模式下， 前后端的分工非常清晰， 前后端的关键协作点是AJAX接口。看起来是如此美妙， 但回过头来看看的话， 这与JSP时代区别不大。复杂度从服务端的JSP里移到了浏览器的JavaScript，浏览器端变得很复杂。类似Spring MVC， 这个时代开始出现浏览器端的分层架构：

缺点

• 前后端接口的约定：如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
• 前端开发的复杂度控制：SPA应用大多以功能交互型为主，JavaScript代码过十万行很正常。大量JS代码的组织，与View层的绑定等，都不是容易的事情。

3.前端为主的MV*时代

此处的MV*模式如下：

• MVC(同步通信为主) ：Model、View、Controller
• MVP(异步通信为主) ：Model、View、Presenter
• MVVM(异步通信为主)：Model、View、View Model

    为了降低前端开发复杂度，涌现了大量的前端框架，比如：Angular JS、React、Vue.js、Ember JS等， 这些框架总的原则是先按类型分层， 比如Templates、Controllers、Models， 然后再在层内做切分，如下图：

优点

• 前后端职责很清晰：前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难， 前端可以本地开发。后端则可以专注于业务逻辑的处理， 输出RES