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浏览器则比较简单。