【Vue】Vue基础教程(1)

前言：

本文内容：前端核心分析、前端发展史、第一个Vue程序

推荐免费Vue基础教程视频：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili

前端核心分析

前端知识体系

前端三要素
- HTML(结构) 超文本标记语言(HyperText Markup Language)
- CSS(表现) 层叠样式表(Cascading Style Sheets)
- JavaScript(行为) 是一种弱类型脚本语言，源代码不需要经过编译，而是由浏览器解析运行
CSS预处理器

由于CSS本身语法不够强大，开发中需要编写很多重复的选择器，加大工作量，且难以维护；这时候开发人员会使用CSS预处理器的工具，提供了CSS确实的样式层复用机制，减少代码冗余，便于维护，提高开发效率。

CSS预处理器定义了一种新的语言，为CSS增加一些编程特性，将CSS作为目标来生成文件；开发者只要通过预处理器自己独有的语法来生成CSS的程序，常见CSS预处理器：
- SASS：基于Ruby，通过服务器处理，功能强大，解析效率高；需要学习Ruby语言，上手难度高于LESS。
- LESS：基于Node.js，通过客户端处理，使用简单；但解析效率低于SASS。
JavaScript发展

Native原生JS开发，也就是按照[ECMAScript]标准的开发方式，简称ES，特点是所有浏览器都支持。ES标准版：
- ES3
- ES4(内部，未正式发布)
- ES5(全浏览器支持)
- ES6(常用，当前主流版本：使用webpack打包为ES5支持)
- ES7
- ES8
- ES9
- …(版本的区别是逐步增加新特性)
TypeScript(微软的标准)：是由微软开发的开源编程语言，它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
JavaScript框架
- JQuery：大家数值的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁影响前端性能；使用他更多是为了兼容IE6、7、8；
- Angular：Google收购的前端框架，由Java程序员开发，其特点是将后台的MVC模式搬到前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不友好；最大的缺点是版本迭代不合理，版本之间出现断层问题；
- React：Facebook的一款高性能的JS前端框架；特点是提出了新概念[虚拟DOM]用于减少真实的DOM操作，在内存中模拟DOM操作，有效提升前端渲染效率；缺点是使用复杂，需要额外学习[JSX]语言；
- Vue：一款渐进式(逐步实现新特性)JavaScript框架，实现模块开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点；
- Axios：前端通信框架，与服务器进行交互，类似JQuery提供的Ajax通信功能；
UI框架
- Ant-Design：阿里巴巴推出，基于React的UI框架；
- ElementUI、iview、ice：饿了么推出，基于Vue的UI框架；
- Bootstrap：Twitter推出，用于前端开发的开源工具包；
- AmazeUI：又叫"妹子UI"，一款开源HTML5跨屏前端框架；
JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持ES新特性，例如编译TypeScript；
- WebPace：模块打包，主要作用是打包、压缩、合并以及按序加载；

前端发展史

三端统一

混合开发(Hybird APP)

主要目的是实现一套代码三端统一(PC、Android、IOS)并能够调用设备底层硬件(如：传感器、GPS、摄像头等)，打包方式：
- 云打包：HBuilder-HBuilderX，DCloud出品：API Cloud
- 本地导包：Cordova(前身PhoneGap)
微信小程序

微信小程序UI开发框架：WeUI
后端技术：

前端人员为了方便开发也需要掌握一定的后端技术，但Java体系非常庞大，为了方便前端人员开发，就出现Node.js。

NodeJS作者表示放弃NodeJS(架构做的不好加上node_modules笨重)，开发新的架构Deno

NodeJS框架及项目管理工具：
- Express：NodeJS框架
- Koa：Express简化版
- NPM：项目总和管理工具，类似Maven
- YARN：NPM的替代方案，类似Maven和Gradle的关系
主流前端框架
- vue.js
- react.js
- angular.js
iView

iview是一个强大的基于Vue的UI库，有很多实用的基础组件比elementui的组件更丰富，主要服务于PC界面的后台产品，使用单文件的Vue组件化开发模式，基于npm+webpack+babel开发。

iView官方文档

iview-github

备注：属于前端主流框架，特点是移动端支持较多

ElementUI

Element是饿了么维护的Vue UI组件库，组件齐全，基本还改后台需要的所有组件，主要用于PC端页面。

Element Plus

element-plus-github

vue-element-admin

备注：属于前端主流框架，特点是桌面端支持较多

ICE

飞冰是阿里巴巴团队基于React/Angular/Vue的后台解决方案，阿里巴巴内部已有270多个项目在使用，包含一条从设计端到开发段的完整链路，帮助用户快速搭建自己的后台应用。

飞冰-基于 React 的研发解决方案

alibaba/ice-github

VantUI

Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库，提供了一整套UI基础组件和业务组件。通过Vant，可以快速搭建出风格统一的页面。

Vant 3

youzan/vant-git
了解前后端分离的演变史

后端为主的MVC时代

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

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

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

缺点：

前端开发重度依赖开发环境，开发效率低；前后端职责纠缠不清，对前端发挥的局限性，性能优化非常有限，很难使用Comet、BigPipe等技术来优化性能。

基于AJAX带来的SPA时代

AJAX的出现，异步JavaScript和xml被正式提出并开始使用CDN作为静态资源存储的SPA单页面响应时代

优点：

这种模式下，前后端分工非常清晰，前后端的关键协作点是AJAX接口。但后过头来发现者域JSP时代区别不大，复杂度从服务器的JSP移动到浏览器的JavaScript。类似SpinrgMVC，这个时代开始出现浏览器端的分层架构。

缺点：

前后端接口的约定，如果后端接口不友好，对前端开发者来说也是非常棘手

SPA大多为功能交互为主，JavaScript代码量非常大，与View层绑定等都不是容易的事情。

前端为主的MV*时代

此处的MV*模式如下：
- MVC(同步通信为主)：Model、View、Controller
- MVP(异步通信为主)：Model、View、Presenter
为了降低前端开发的复杂度，涌现出大量的前端框架，比如：Angular.js,React,Vue.js等，这些框架总的原则是先按类型分层，比如Templates、Controllers、Models，然后在层内做切分。

优点：

前后端职责清晰

前端开发的复杂度可控

部署相对独立

缺点：

代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。

全异步，对SEO不利。往往需要服务端做同步渲染的降级方案。

性能并不是最佳，特别是移动互联网环境下。

SPA不饿能满足所有需求，依旧存在大量页面应用。URL Design需要后端配合，前端无法完全掌控。

NodeJS带来的全栈时代

前端为主的MV*模式解决了很多问题，但仍旧存在不足之处；随着NodeJS的兴起，JavaScript开始有能力运行在服务器端。这意味者一种新的研发模式；

通过NodeJS，Web Server层也是JavaScript代码，这意味着部分代码可前后端复用，需要SEO的场景可以在服务端同步渲染，由于异步请求过多导致性能问题也可以通过服务端来缓解。解决了上一种模式存在的问题。

NodeJS面临的挑战：

需要前端对服务端编程由更进一步的认识，比如TCP/IP等网络知识的掌握。

NodeJS层与Java层的高效通信。NodeJS模式下，都在服务器端，RestFul HTTP通信未必高效，通过SOAP等方式通信更高效。

对部署、运维层面的熟练了解，需要更多知识点和实操经验就。
小结

前后端分离的开发思想主要是基于SOC(关注度分离原则)，以上的模式都是让前后端职责更清晰，分工更合理高效。

第一个Vue程序

概述

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 核心库只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVVM模式

Model：模型层，在这里表示JavaScript对象
View：视图层，这里表示DOM
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并通知数据发生改变

Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定

为什么要使用Vue.js

轻量级，体积小是一个重要指标
更适合移动端(比如Touch事件)
易上手，学习曲线平稳，文档齐全
吸收了Angular(模块化)和React(虚拟DOM)的长度，并拥有自己独特的功能
开源社区活跃度高

第一个Vue程序

IDEA的Plugins中安装Vue的插件

下载地址

开发版本

包含了警告和调试模式：https://cn.vuejs.org/js/vue.js
压缩版本：https://cn.vuejs.org/js/vue.min.js

CDN

1 2	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

代码编写

Vue.js的核心是实现了MVVM模式下的ViewModel层，第一个Vue程序就展示它的数据绑定功能

新建firstVue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<script>
    // View层模板和数据是双向绑定
    let vm = new Vue({
        el:"#app",
        // Model ： 数据
        data:{
            message:"hello vue"
        }
    });
</script>
</body>
</html>