- VueJS Tutorial
- VueJS - Home
- VueJS - Overview
- VueJS - Environment Setup
- VueJS - Introduction
- VueJS - Instances
- VueJS - Template
- VueJS - Components
- VueJS - Computed Properties
- VueJS - Watch Property
- VueJS - Binding
- VueJS - Events
- VueJS - Rendering
- VueJS - Transition & Animation
- VueJS - Directives
- VueJS - Routing
- VueJS - Mixins
- VueJS - Render Function
- VueJS - Reactive Interface
- VueJS - Examples
- VueJS Useful Resources
- VueJS - Quick Guide
- VueJS - Useful Resources
- VueJS - Discussion
VueJS - 概述
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 编码。
人气
React 比 VueJS 更流行。React 的工作机会比 VueJS 多。React 背后有一个大牌，即 Facebook，这使得它更受欢迎。由于React使用了JavaScript的核心概念，因此它使用了JavaScript的最佳实践。使用 React 的人肯定会非常熟悉所有 JavaScript 概念。
VueJS 是一个开发框架。目前，与 React 相比，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 小得多。以下链接提供了框架性能的比较http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
人气
目前，Angular 比 VueJS 更流行。许多组织都使用 Angular，这使得它非常受欢迎。对于有 Angular 经验的候选人来说，工作机会也更多。然而，VueJS 正在市场上占据一席之地，可以被认为是 Angular 和 React 的有力竞争对手。
依赖关系
Angular 提供了很多内置功能。我们必须导入所需的模块并开始使用它，例如@Angular/animations、@Angular/form。
VueJS 不具备 Angular 的所有内置功能，需要依赖第三方库才能使用。
灵活性
VueJS 可以轻松地与任何其他大型项目合并，没有任何问题。Angular 与任何其他现有项目一起使用并不容易。
向后兼容性
我们有 AngularJS、Angular2，现在还有 Angular4。AngularJS 和 Angular2 有很大的区别。由于核心差异，使用 AngularJS 开发的项目应用程序无法转换为 Angular2。
VueJS最新版本是2.0，向后兼容性很好。它提供了很好的文档，非常容易理解。
打字稿
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+ 的所有浏览器中正常工作。