合集 – Vue零基础入门到关门(11)
1.Vue入门到关门之前端引入04-302.Vue入门到关门之Vue介绍与使用04-303.Vue入门到关门之指令系统04-304.Vue入门到关门之计算属性与监听属性04-305.Vue入门到关门之生命周期钩子04-306.Vue入门到关门之组件05-027.Vue入门到关门之Vue项目工程化05-028.Vue入门到关门之第三方框架elementui05-029.Vue入门到关门之Vue2高级用法05-0910.Vue入门到关门之Vue3项目创建05-0911.Vue入门到关门之Vue3学习05-09
收起
一、前端发展历史
1、什么是前端?
前端:针对浏览器的开发,代码在浏览器运行
后端:针对服务器的开发,代码在服务器运行
2、前后端不分的时代
互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。
就比如使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)来编写一个个的页面,然后发给后端(PHP、Python、Go、Java) ,后端收到浏览器的请求再嵌入模板语法、渲染完数据返回数据给前端,最终在浏览器中查看。
3、后端 MVC 的开发模式
那时的网站开发,采用的是后端 MVC 模式,而前端只是后端 MVC 的 V。
Model(模型层):提供/保存数据
Controller(控制层):数据处理,实现业务逻辑
View(视图层):展示数据,提供用户界面
MVC框架详细介绍:Django框架之python后端框架介绍 – Xiao0101 – 博客园 (cnblogs.com)
4、Ajax(前后端分离的雏形)
Ajax 技术诞生,改变了一切。
2004年:Gmail
2005年:Google 地图
前端不再是后端的模板,可以独立得到各种数据。前端可以单用Ajax来加载数据,DOM渲染页面。并且Ajax 技术也促成了 Web 2.0 的诞生。
Web 1.0:静态网页,纯内容展示
Web 2.0:动态网页,富交互,前端数据处理
5、MVVM模式
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式。那时另一些框架提出 MVVM 模式,用 View Model 代替 Controller。
拿vue为例:
Model:vue对象的data属性里面的数据,这里的数据要显示到页面中(js变量)
View:vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
View-Model:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示中p标签中就是vm对象自动完成的(响应式[双向数据绑定]:JS中变量变了,HTML中数据也跟着改变)
本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。
6、SPA(单页面应用)
不仅控制整个页面,还负责处理抓取新数据,并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application,缩写为 SPA)。
前端可以做到:
读写数据
切换视图
用户交互
这意味着,网页其实是一个应用程序。
2010年后,前端工程师从开发页面,变成了开发“前端应用”(跑在浏览器里面的应用程序)。
传统的架构
单页应用的架构
7、Angular框架
Google 公司推出的 Angular 在那时是最流行的 MVVM 前端框架。它的风格属于 HTML 语言的增强,核心概念是双向绑定。
Angular框架的出现(1个JS框架):导致出现了“前端工程化”的概念(前端也是1个工程、1个项目)
8、React、Vue框架
React、Vue框架是当下最火的2个前端框架(Vue:国人喜欢用,React:外国人喜欢用)
vue的基本思想与 Angular 类似,但是用法更简单,而且引入了响应式编程的概念。
React是一种用于构建用户界面的javaScript库,它主要用来写html,或构建web应用。React 的核心思想是“声明式编程”,也就是说,开发人员可以专注于定义组件的外观和行为,而不必担心实现细节。
React 强调组件化开发思想,将整个 UI 拆分成小组件,并在这些组件之间建立清晰的层次关系,而 Angular 和 Vue.js 等框架则更加注重整个应用程序的架构设计。
React知识点详情:react知识点总结 – 简书 (jianshu.com)
9、大前端时代
移动开发(Android+IOS) + Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面):前端 —> 大前端
一套代码在各个平台运行(大前端):谷歌Flutter(Dart语言:和Java很像)可以运行在IOS、Android、PC端
10、uni-app
uni-app(uni,读you ni,是统一的意思)是一个使用Vue.js开发所有前端应用的框架,开发者实现了一套代码,同时运行到多个平台;一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台。
二、Vue的安装
1、IDE集成开发工具
前端开发:vue,react可以使用vscode或者webstorm
因为webstorm 是jetbrains全家桶,用起来跟pycharm一样,比较熟悉
vscode也很好用,最大的优点就是免费
2、Vue2安装
Vue现在有Vue2和Vue3,因为Vue3兼容Vue2,并且两者语法也有点差异,所以我们先从Vue2开始学起,后面再学习Vue3。
Vue2官方文档
https://v2.cn.vuejs.org/
Vue3官方文档
https://cn.vuejs.org/
作者:尤雨溪
注意:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!
(1)CDN引入
对于开发或学习:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
(2)本地引入
开发版本:https://v2.cn.vuejs.org/js/vue.js 包含完整的警告和调试模式
生产版本:https://v2.cn.vuejs.org/js/vue.min.js 删除了警告
推荐安装稳定版本:2.7.16
详细请查看官方文档:安装 — Vue.js (vuejs.org)
(3)Vue3引入
CDN引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
本地引入
https://unpkg.com/vue@3/dist/vue.global.js
(4)对不同构建版本的解释(只针对Vue2版本)
在其他cdn加速的网站中,你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:
UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) | |
---|---|---|---|---|
完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
只包含运行时版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | – |
完整版 (生产环境) | vue.min.js | – | – | vue.esm.browser.min.js |
只包含运行时版 (生产环境) | vue.runtime.min.js | – | – | – |
三、补充
1、选项式 API 和组合式 API
vue2是选项式 API
vue3两个都支持:但是推荐使用组合式api
2、node.js
node.js的形成过程:把谷歌浏览器的v8引擎—> 用c语言重写了—> 能运行再操作系统上—> 形成nodejs
3、 javascript和Ecmascript
JS是由ECMAScript、DOM、BOM组成
JS是运行在浏览器脚本的语言
4、typescript
TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。
5、CSS框架
CSS框架是预先准备好的软件框架,允许使用层叠样式表语言更容易,更符合标准的进行网页设计。大多数这些框架包含至少一个栅格设计(grid)。功能更强大的框架,还配备了更多的功能和附加的基于JavaScript的功能,但大多设计导向的和Unobtrusive JavaScript。本文从功能和充分的JavaScript框架区分它们。
两个显着和广泛应用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。
一些更为大型的框架会使用CSS的解释器。例如LESS和Sass。