Vue入门到关门之前端引入

随笔2个月前发布 微弇仐竹
2 0 0

合集 – 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 上,不需要手动处理。

Vue入门到关门之前端引入

6、SPA(单页面应用)

不仅控制整个页面,还负责处理抓取新数据,并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application,缩写为 SPA)。

前端可以做到:

读写数据
切换视图
用户交互

这意味着,网页其实是一个应用程序。

2010年后,前端工程师从开发页面,变成了开发“前端应用”(跑在浏览器里面的应用程序)。


传统的架构

Vue入门到关门之前端引入

单页应用的架构

Vue入门到关门之前端引入

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。

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...