Vue 的介绍与安装，web前端开发自学要多久

用户33914928060
43 阅读11分钟

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

  • HTML5有哪些新特性？

  • Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信？

  • ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

  • 简述⼀下src与href的区别？

  • cookies,sessionStorage,localStorage 的区别？

  • HTML5 的离线储存的使用和原理？

  • 怎样处理 移动端 1px 被 渲染成 2px 问题？

  • iframe 的优缺点？

  • Canvas 和 SVG 图形的区别是什么？

JavaScript

  • 问：0.1 + 0.2 === 0.3 嘛？为什么？

  • JS 数据类型

  • 写代码：实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的？

  • new 一个函数发生了什么

  • 什么是作用域？

  • JS 隐式转换，显示转换

  • 了解 this 嘛，bind，call，apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行，Event Loop

  • 手写题：Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些？

  • PWA使用过吗？serviceWorker的使用原理是啥？

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

  • 事件循环机制 （Event Loop）

开源分享：docs.qq.com/doc/DSmRnRG…

前言

=====================================================================

本文主要讲解 Vue 的介绍及安装进行简单讲解，要明确什么是渐进式 JavaScript 框架。

一、Vue 简介

===========================================================================

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue.js 被设计为可以自底向上逐层应用。Vue.js 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js 也完全能够为复杂的单页应用提供驱动。

——该段文字描述来自官网。

按照官网所说，Vue.js 是一个渐进式框架。所谓的渐进式是指可以一步一步的自底层向上阶段性的使用 Vue.js，不必一开始就将整个 Vue.js 框架所有技能点都学会，可以用一部分就学一部分。这正是 Vue.js 易于上手的关键所在，也是开发者喜欢 Vue.js 的一个重要原因。

另外 Vue.js 和其他的前端框架有很好的兼容性，这就解决了多个前端框架共用于一个项目的问题，同时便于项目整合和原有项目的升级。

最后 Vue.js 为 Web 开发提供了强大的驱动支持，让 Web 开发变得更加简单。使用 Vue.js 可以轻松地实现 Web 前端开发中常见的高级功能。例如：解耦视图和数据、前端路由、状态控制、模块开发、虚拟 DOM 等。

总之，Vue.js 是一个优秀的 MVVM 模式框架。

二、MVVM 模式和 MVC 模式

====================================================================================

2.1 MVC 模式

  • MVC（Model View Controller）是一种软件设计模式，是模型（Model）— 视图（View）— 控制器（Controller）的缩写。这种设计模式将软件分为三个独立的业务模型：

  • Model（模型）：是程序中用于处理数据逻辑的部分。模型对象负责在数据库中存取数据；

  • View（视图）：是程序中处理数据显示的部分。通常视图是依据模型数据创建的；

  • Controller（控制器）：是程序中处理用户交互的部分。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

斯坦福大学公开课上的这幅图是最经典和最规范的 MVC 标准。见下图：

在这里插入图片描述

可以用一句话来描述三者之间的关系，“ Controller 负责将 Model 的数据用 View 显示出来”，换句话说，就是在 Controller 里面把 Model 的数据赋值给 View 。

因为 MVC 模式出现的时间比较早，在 MVC 模式比较流行的时候前端技术还不成熟，此时很多业务逻辑代码都是在服务器端实现，因此对前端技术而言并没有真正意义上的 MVC 模式。近些年随着前端技术的发展和流行才出现了新的 MVVM 模式。

2.2 MVVM 模式

MVVM 是 Model-View-ViewModel 的简写，其本质就是 MVC 的改进版。但是需要注意的是，ViewModel 层并非是 Controller 层的替代，实际上 ViewModel 存在的目的在于抽离 Controller 层中用于展示的业务逻辑，其他视图操作的业务逻辑还是放在 Controller 层中实现。也就是说 MVVM 实现的是业务逻辑组件的部分重用。

正如前文讲解 MVC 是如何分配工作一样，早期的程序设计过程中，开发者需要存储数据所以有了 Model 层，开发者需要 UI 界面所以有了 View 层，开发者需要有一个地方把 Model 中的数据在 View 中显示所以有了 Controller 层，Controller 层负责的业务逻辑实现。

一方面，在过去的十几年中随着前端技术的发展，开发者已经将越来越多用于展示的业务逻辑代码由服务器端移植到前端中实现，这些代码写在前端，使得前端的控制层代码变得非常臃肿，代码的维护工作变得异常困难。另一方面，当年为了解决浏览器兼容性问题出现了很多类库， 如 Prototype、jQuery 等，但是这些类库并没有实现控制层用于描述业务逻辑的功能。

综合以上两方面原因，才有了 MVVM 模式框架的出现，其中比较著名的有：Angular.js、 React.js、Vue.js。这些框架的出现极大提高了前端开发的效率。

MVVM 模式的核心是“将 View 的状态和行为抽象化，将视图 UI 和业务逻辑分离开”，这些工作由 ViewModel 模块来实现。ViewModel 可以取出 Model 中的数据，还可以处理 View 中因展示内容而涉及的业务逻辑。

MVVM 模式的结构如下图所示。

在这里插入图片描述

Vue.js 框架在设计上使用的 MVVM 模式，对应框架各部分的功能如下：

  • Model：JavaScript 中存储的数据，如对象、数组等。

  • View：页面视图展示部分，和 HTML、CSS 相关。

  • ViewModel：业务逻辑处理，比如 AJAX 请求等。

三、Vue 的渐进式

=============================================================================

本节将通过三个场景详细描述 Vue.js 框架渐进式的含义。

  1. 现有一个项目已经存在一个现成的服务端应用，开发者可以将 Vue.js 作为前端开发工具嵌入到该项目当中，这样就可以使该项目具有更加丰富的交互体验；

  2. 如果开发者希望将更多业务逻辑放到前端中实现，那么 Vue.js 的核心库及其生态系统也可以满足这些需求（Core+Vuex+Vue-router）。同时和其它前端框架一样，Vue.js 允许开发者将一个网页分割成可复用的组件，每个组件都包含属于自己的 HTML、CSS、JavaScript 以用来渲染网页中相应的地方；

  3. 如果想要构建一个大型的应用，则需要将一个完整的功能分割成各自独立的组件，Vue.js 提供了一个命令行工具，使快速初始化一个多组件工程变得非常简单（vue init webpack my-project）。

以上这三个例子，是逐层递进的，也就是说对 Vue.js 的使用可大可小，不论需求如何它都会有相应的方式整合到项目当中，所以说它是一个渐进式的框架。

四、Vue 初体验

============================================================================

下面体检一下如何使用 Vue.js 开发项目，按照传统先写一个 “Hello World”。

首先新建一个 HTML 文件，在文件中引入 Vue.js 的支持。

或者这样引入：

Vue.js 有多种安装方式。不推荐新手直接使用 vue-cli 来完成安装，特别是在还不了解基于 Node.js 的构建工具时。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，代码如下：

Title

{{ message }}

变量 app 代表了一个 Vue 实例，在开发的过程中涉及到的所有代码都是一个对象，这些对象将被写入 Vue 实例中。其中必不可少的一个属性为 el 属性，该属性是 Vue 实例对象的第一个属性，作用是指定页面中一个已经存在的 DOM 元素来挂载 Vue 实例。挂载成功后就可以在实例中定义 data 数据和 methods 等属性，然后再通过各种指令等操作实现数据的双向绑定。上面示例代码的显示效果如下：

请添加图片描述

五、Vue 安装

===========================================================================

Vue 的安装有两种方式：

  • 独立版本方式：是 Vue 轻量级的使用，适用于在 SSM 等 Web 开源架构的基础上使用 Vue 实现前端数据的双向绑定等操作。

  • 使用 NPM 方式：可以和 Node.js 整合实现大前端架构开发。不同的技术栈选择不同的安装方式安装。

六、独立版本方式

===========================================================================

独立版本可以在官网直接下载 Vue.js 文件，在页面使用 <script>标签引入后即可使用。Vue 分为开发版本和生产版本两种不同的版本。开发版可以提供未压缩的 js 源文件，用户可以看到 js 源代码这样可以对学习和理解 Vue 框架有所帮助。生产版是经过压缩后的版本，无法直接阅读但是文件体积小，便于页面引用。在学习的过程中可以根据情况选择对应的版本下载。

七、使用 NPM 方式

==============================================================================

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。下面列出 NPM 安装方式所需要安装的文件列表：

在开始之前应先安装Node.js。

NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候，也安装好了 NPM。

安装 vue-cli 脚手架

vue-cli 是一个官方命令行工具，该工具可用于快速搭建大型单页应用。首先运行下面命令安装脚手架。

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

  • 技术要深入到什么程度？

  • 做久了技术总要转型管理？

  • 我能做什么，我想做什么？

  • 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

  • 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

  • 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

  • 栈内技术 - 是指你的前端专业领域技术

  • 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

  • 工程经验 - 是建设专业技术体系的“解决方案”

  • 带人做事 - 是对团队协作能力的要求

  • 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

avatar
文章
阅读
粉丝