【零基础入门VUE】VueJS - 概述

??面向读者：所有人

?所属专栏：零基础入门VUE专栏https://blog.csdn.net/arthas777/category_12537076.html

目录

特征

虚拟DOM

数据绑定

成分

事件处理

动画/过渡

计算属性

模板

指令

观察者

路由

轻的

Vue-CLI

与其他框架的比较

VueJS 与 React

VueJS 与 Angular

VueJS 与 Ember

VueJS 与淘汰赛

VueJS 与 Polymer

---

VueJS是一个开源渐进式 JavaScript 框架，用于开发交互式 Web 界面。它是用于简化 Web 开发的著名框架之一。VueJS 专注于视图层。它可以轻松集成到前端开发的大型项目中，没有任何问题。

VueJS 的安装非常容易上手。任何开发人员都可以在短时间内轻松理解并构建交互式 Web 界面。VueJS 是由 Google 前员工 Evan You 创建的。VueJS 的第一个版本于 2014 年 2 月发布。最近它在 GitHub 上的星星数量达到了 64,828 颗星，非常受欢迎。

特征

以下是 VueJS 可用的功能。

虚拟DOM

VueJS 使用虚拟 DOM，其他框架（例如 React、Ember 等）也使用虚拟 DOM。不会对 DOM 进行更改，而是创建 DOM 的副本，该副本以 JavaScript 数据结构的形式存在。每当要进行任何更改时，都会对 JavaScript 数据结构进行更改，并将后者与原始数据结构进行比较。最终的更改会更新到真实的 DOM，用户将看到它的变化。这在优化方面是有好处的，成本更低，并且可以更快地进行更改。

数据绑定

数据绑定功能有助于操作 HTML 属性或为其赋值、更改样式、借助VueJS 提供的名为v-bind的绑定指令分配类。

成分

组件是 VueJS 的重要功能之一，有助于创建可在 HTML 中重用的自定义元素。

事件处理

v-on是添加到 DOM 元素的属性，用于监听 VueJS 中的事件。

动画/过渡

VueJS 提供了多种方法来在 HTML 元素添加/更新或从 DOM 中删除时应用过渡。VueJS 有一个内置的过渡组件，需要包裹在元素周围才能实现过渡效果。我们可以轻松添加第三方动画库，并为界面添加更多交互性。

计算属性

这是VueJS的重要特性之一。它有助于监听对 UI 元素所做的更改并执行必要的计算。不需要为此进行额外的编码。

模板

VueJS 提供基于 HTML 的模板，将 DOM 与 Vue 实例数据绑定。Vue 将模板编译为虚拟 DOM 渲染函数。我们可以使用渲染函数的模板，为此我们必须用渲染函数替换模板。

指令

VueJS 具有 v-if、v-else、v-show、v-on、v-bind 和 v-model 等内置指令，用于在前端执行各种操作。

观察者

观察者应用于变化的数据。例如，表单输入元素。在这里，我们不必添加任何其他事件。Watcher 负责处理任何数据更改，使代码简单快速。

路由

页面之间的导航是在 vue-router 的帮助下执行的。

轻的

VueJS 脚本非常轻量级，性能也非常快。

Vue-CLI

可以使用 vue-cli 命令行界面在命令行安装 VueJS。它有助于使用 vue-cli 轻松构建和编译项目。

与其他框架的比较

现在让我们将 VueJS 与其他框架（例如 React、Angular、Ember、Knockout 和 Polymer）进行比较。

VueJS 与 React

虚拟DOM

虚拟 DOM 是 DOM 树的虚拟表示。使用虚拟 DOM，会创建一个与真实 DOM 相同的 JavaScript 对象。任何时候需要对 DOM 进行更改时，都会创建一个新的 JavaScript 对象并进行更改。随后，对两个 JavaScript 对象进行比较，并在真实 DOM 中更新最终的更改。

VueJS 和 React 都使用虚拟 DOM，这使得速度更快。

模板 vs JSX

VueJS 分别使用 html、js 和 css。对于初学者来说，很容易理解并采用 VueJS 风格。VueJS 基于模板的方法非常简单。

React 使用 jsx 方法。ReactJS 的一切都是 JavaScript。HTML 和 CSS 都是 JavaScript 的一部分。

安装工具

React 使用create React app，VueJS 使用vue-cli /CDN/npm。两者都非常易于使用，并且该项目已满足所有基本要求。React 需要 webpack 来构建，而 VueJS 不需要。我们可以使用 cdn 库在 jsfiddle 或 codepen 中的任何位置开始 VueJS 编码。

人气

根据调查，很多人正在适应 VueJS，这使得它比 React 和 Angular 更受欢迎。有一个很好的社区致力于 VueJS 的不同功能。vue-router 由该社区维护并定期更新。

VueJS 继承了 Angular 和 React 的优点，并构建了一个强大的库。由于其轻量级库，VueJS 比 React/Angular 要快得多。

VueJS 与 Angular

相似之处

VueJS 与 Angular 有很多相似之处。v-if、v-for 等指令几乎与 Angular 的 ngIf、ngFor 类似。它们都有一个用于项目安装和构建的命令行界面。VueJS 使用 Vue-cli，Angular 使用 angular-cli。两者都提供双向数据绑定、服务器端渲染等。

复杂

Vuejs 非常容易学习和上手。如前所述，初学者可以使用 VueJS 的 CDN 库并在 codepen 和 jsfiddle 中开始使用。

对于Angular来说，我们需要经过一系列的安装步骤，对于初学者来说Angular上手难度不大。它使用 TypeScript 进行编码，这对于来自 JavaScript 核心背景的人来说很困难。不过，对于Java和C#背景的用户来说，学习起来更容易。

表现

性能如何，由用户决定。VueJS 文件大小比 Angular 小得多。以下链接提供了框架性能的比较Table Report

依赖关系

Angular 提供了很多内置功能。我们必须导入所需的模块并开始使用它，例如@Angular/animations、@Angular/form。

VueJS 不具备 Angular 的所有内置功能，需要依赖第三方库才能使用。

灵活性

VueJS 可以轻松地与任何其他大型项目合并，没有任何问题。Angular 与任何其他现有项目一起使用并不容易。

向后兼容性

我们有 AngularJS、Angular2，现在还有 Angular4。AngularJS 和 Angular2 有很大的区别。由于核心差异，使用 AngularJS 开发的项目应用程序无法转换为 Angular2。

打字稿

Angular 使用 TypeScript 进行编码。用户需要了解 Typescript 才能开始使用 Angular。但是，我们可以使用 cdn 库在 jsfiddle 或 codepen 中的任何位置开始 VueJS 编码。我们可以使用标准 JavaScript，这很容易上手。

VueJS 与 Ember

相似之处

Ember提供了Ember命令行工具，即ember-cli，可以方便地安装和编译Ember项目。

VueJS 还有一个命令行工具 vue-cli 用于启动和构建项目。

它们都具有路由器、模板和组件等功能，这使得它们作为 UI 框架非常丰富。

表现

与 Ember 相比，VueJS 具有更好的性能。Ember 添加了 glimmer 渲染引擎，旨在提高重新渲染性能，这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。然而，与 Ember 相比，VueJS 具有更好的性能。

VueJS 与淘汰赛

Knockout 提供了良好的浏览器支持。低版本 IE 支持，而 IE8 及以下版本不支持 VueJS。随着时间的推移，淘汰赛的发展速度已经放缓。最近，同样的事情并没有太多流行。

另一方面，VueJS 已经开始受到 Vue 团队提供定期更新的欢迎。

VueJS 与 Polymer

Polymer 库由 Google 开发。它被用于许多 Google 项目，例如 Google I/O、Google Earth、Google Play Music 等。它提供类似于 VueJS 的数据绑定和计算属性。

Polymer 自定义元素定义包括纯 JavaScript/CSS、元素属性、生命周期回调和 JavaScript 方法。相比之下，VueJS 可以轻松使用 JavaScript/html 和 CSS。

Polymer 使用 Web 组件功能，需要浏览器进行填充，而浏览器不支持这些功能。VueJS 没有这样的依赖关系，并且可以在 IE9+ 的所有浏览器中正常工作。