Vue基础入门
Vue基础入门
1.重点内容
1.重点
- 了解Web前端技术发展简史
- Vue的核心设计思想及优势
- 了解Vue开发环境的搭建
2.初识Vue
2.1Web前端技术发展简史
1.发展
- 静态页面阶段1.0
- Javascript诞生及第一次浏览器战争
- 动态页面的发展
- Ajax的流行开启Web2.0时代
- 前端兼容性框架的出现
- HTML5出现及第二次浏览器战争
- Node.js爆发
- 前端MV*架构及SPA时代的开启
- 移动Web和Hybrid App
- ECMAScript6
- 今天的前端
2.Ajax简介
- Ajax技术中实现的异步HTTP请求，这让页面无需刷新就可以发起HTTP请求，用户也不用专门等待请求的响应，而是可以继续网页的浏览或操作。
3.今天的前端
- 今天的前端技术已经形成了一个大的技术系统。
- 以Github为代表的代码管理仓库；
- NPM和Yarn为代表的包管理工具；
- ES6及Babel和TypeScript构成的脚本体系；
- HTML5；
- CSS3和相应的处理技术；
- React、Vue、Anjular为代表的框架；
- Webpack为代表的打包工具；
- Node.js为基础的Express和KOA后端框架；
- Hybrid技术。
4.GitHub简介：
- GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。
GitHub 于 2008 年 4 月 10 日正式上线，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。
目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。
GitHub是很多开发者远程协作的重要工具，其社交化编码的理念伴随着开源运动改变着整个开发社区的生态，无数优质项目依托GitHub在全球开源开发者的参与下蓬勃发展。
5.Node.js简介
- Node.js (简称为Node)是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、JSP、ASP.NET等服务端语言平起平坐的脚本语言，用于方便地搭建响应速度快、易于扩展的中小型网络应用。
Node发布于2009年5月，由Ryan Dahl（瑞安·达尔）开发，实质是对Chrome V8引擎进行了封装，V8引擎执行Javascript的速度非常快，性能非常好。
Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。
Node以Chrome的V8引擎为基础，基于事件循环的异步I/O框架，轻量高效，非常适合在分布式设备上运行数据密集型的实时应用。
6.Node.js的框架
- 简介：Express和Koa后端框架都是Node.js的主流应用开发框架。
Express后端框架是一个完整的Node.js应用框架。Koa后端框架是由Express团队开发的，但是它有不同的关注点。
Express后端框架是基于Node.js平台的极简、灵活的Web应用开发框架，主要基于Connect中间件，并且自身封装了路由、视图处理等功能。
Koa后端框架是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。Koa后端框架并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。
2.2前端领域中的MV*模式
2.2.1单页应用
1.单页应用简介
- 在前端领域中，SPA应用（单页应用）开始被广泛使用。
但是如果依旧使用DOM操作的模式来开发SPA，整个开发过程会比较繁琐，后期难以维护，为了解决这一问题，前端开发者们提出了MV模式。
MV模式将View中的逻辑分离出去，形成一个弱逻辑的易于维护的视图。
MV模式中的是Model和View的桥梁，负责保持Model和View的同步。
2.2.2MVC模式
1.MVC简介
- MVC模式（Model-View-Controller），即数据模型、视图、控制器三个部分。
每个部分都有自己的职责：
M: 数据模型，负责存放请求的数据结果；
V：视图，用来承载DOM的展示，包括更新渲染；
C：事件控制函数，用来根据前端路由条件来调用不同的Model传递给View渲染不同的数据内容。
整个流程其实很简单，通过监听URL或者用户点击等操作 来触发Controller，从而来进行改变数据、视图。
2.MVC原理？
- 1.View 传送指令到 Controller。
- 2.Controller 完成业务逻辑后，要求 Model 改变状态。
- 3.Model 将新的数据发送到 View，用户得到反馈。
在MVC模式中，所有通信都是单向的。
3.MVC缺点？
- MVC模式的业务逻辑主要集中在Controller，当每个事件都流经Controller时，这层会变得十分臃肿。
而且MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接影响了Controller的复用性。
2.2.3MVP模式
1.简介：
- MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。
与MVC相比，Presenter成为View和Model的中介，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰；由于View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作。
2.MVP原理图？
- 1.View 与 Model 不发生联系，都通过 Presenter 传递。
- 2.View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
3.MVP缺点？
- Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难。
而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，它不得不过多关注特定的视图，一旦视图需求发生改变，Presenter也需要改动。
2.2.4MVVM模式
1.MVVM简介：
- MVVM（Model-View-ViewModel）最早由微软提出。
MVVM把View和Model的同步逻辑自动化了。以前Presenter负责的View和Model同步工作交给框架所提供的双向数据绑定功能进行负责，只需要告诉View显示的数据对应的是Model哪一部分即可。
MVVM可以认为是一个自动化的MVP，只不过使用了ViewModel替代了Presenter。即数据Model的调用和视图View的渲染不需要我们主动操作，而是ViewModel自动触发来完成。
整体来看，MVVM比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新。
2.MVVM原理图？
样子和MVP的样子差不多，但是非常好用
2.3前端三剑客 React、Angular、Vue比较
要记住哦！
1.前端三剑客
- React使用的是MVC框架。
- Angular使用的MVVM的思想。
- Vue一定意义上算是React和Angular的集大成者。它吸取了MVVM的数据管理思想，同时应用了React的virtual Dom（虚拟dom）算法。
2.React？
- React使用的是MVC框架。所有MVC框架都是单向数据流的。（MVC是一个圈）
- 使用Virtual DOM。
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
- 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
3.Angular？
- Angular使用的MVVM的思想，当触发UI事件，ajax请求或者timeout延迟，会触发脏检查。这时会调用 $digest 循环遍历所有的listener里的数据，判断当前值是否和先前的值有区别，如果检测到变化的话，会调用$watch 函数，最后把所有的变化全部更新，调用apply()方法把新的数据渲染到页面上。
- 优点：一次检测会收集所有的数据变化，然后统一更新 UI（影响性能），大大减少了操作 DOM 的次数。
- 缺点：只要有ui操作，ajax，settimeout就会进行检查，且当watcher之间相互影响的时候，更会触发多次$digest循环，这样watcher一多，就会很影响性能。
4.Vue？
- Vue一定意义上算是React和Angular的集大成者。它吸取了MVVM的数据管理思想，同时应用了React的virtual Dom算法。
- 它使用了双向数据绑定来满足开发的便捷，但是在不同组件之间又使用单向数据流，来保证数据的可控性。
- 它使用了很多Angular的指令语法，但是他革新了Angular的脏数据检查机制，使用数据劫持（监听数据变化）的方法来触发数据检查机制。
- 它借鉴了React的组件化思想，大大增加了前端工程的结构规范化。
2.4Vue的优势
1.Vue的优势？
- 轻量级：Vue简单、直接，所以Vue使用起来更加友好。
- 双向数据绑定：数据驱动视图，视图也可以驱动数据。
- 指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
- 插件：插件用于对Vue框架功能进行扩展。
3.Vue开发环境
3.1Visual Studio Code编辑器
1.下载地址
- Visual Studio Code下载地址：https://code.visualstudio.com/Download。
2.VSCode的好处？
- 轻巧极速，占用系统资源较少。
- 具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。
- 跨平台。
- 主题界面的设计比较人性化。
- 提供了丰富的插件。
3.2Vue的下载和引入
1.Vue官网？
- https://cn.vuejs.org/
2.Vue2x官方文档？
- https://cn.vuejs.org/v2/guide/installation.html
3.下载之后的引入
<script src="vue.js"></script>4.CDN的引入方式？
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>3.3Chrome谷歌浏览器
1.谷歌浏览器的优点
- Chrome浏览器首先是速度快，启动速度、载入网页都相当迅速，这是最大的优点。
- 界面简洁，外观清爽。
- 稳定性好，与WINDOWS系统的兼容性强，这也是为什么微软会放弃ie推出以chromium为核心的新版edge浏览器了。
- 丰富而强大的扩展。以chromium为核心的浏览器之所以强悍，扩展是主要原因，扩展赋予浏览器前所未有的能力。
- 操作简单和设置方便，火狐浏览器扩展也很厉害，但是火狐的设置需要比较高的浏览器知识储备才能玩好，Chrome浏览器则比较简单。