📜  VueJS-概述

📅  最后修改于: 2020-10-17 04:56:32             🧑  作者: Mango


VueJS是用于开发交互式Web界面的开源渐进式JavaScript框架。它是用于简化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,用户将看到更改。就优化而言,这是很好的,它更便宜,并且可以更快的速度进行更改。

数据绑定

数据绑定功能借助VueJS提供的名为v-bind的绑定指令帮助操纵HTML属性或将值分配给HTML属性,更改样式,分配类。

组件

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

事件处理

v-on是添加到DOM元素以侦听VueJS中事件的属性。

动画/过渡

当从DOM添加/更新或删除HTML元素时,VueJS提供了多种方法来将过渡应用于HTML元素。 VueJS具有内置的过渡组件,需要将其包装在元素周围以产生过渡效果。我们可以轻松添加第三方动画库,也可以向界面添加更多的交互性。

计算属性

这是VueJS的重要功能之一。它有助于侦听对UI元素所做的更改并执行必要的计算。不需要为此附加编码。

范本

VueJS提供了基于HTML的模板,这些模板将DOM与Vue实例数据绑定在一起。 Vue将模板编译为虚拟DOM Render函数。我们可以使用render函数的模板,为此,我们必须将模板替换为render函数。

指令

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 v / s反应

虚拟DOM

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

VueJS和React都使用虚拟DOM,这使其速度更快。

模板v / s JSX

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

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

安装工具

React使用create react应用程序,而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 v / s 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 v / s灰烬

相似之处

Ember提供Ember命令行工具,即ember-cli,可轻松安装和编译Ember项目。

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

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

性能

与Ember相比,VueJS具有更好的性能。 Ember添加了一个微光渲染引擎,旨在提高重新渲染性能,该概念与使用虚拟DOM的VueJS和React相似。但是,与Ember相比,VueJS具有更好的性能。

VueJS v / s淘汰赛

淘汰赛提供了良好的浏览器支持。较低版本的IE支持该版本,而IE8及以下版本不支持VueJS。随着时间的推移,淘汰赛的发展已经放缓。最近没有什么受欢迎的东西。

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

VueJS与聚合物

聚合物库由Google开发。它用于许多Google项目中,例如Google I / O,Google Earth,Google Play音乐等。它提供类似于VueJS的数据绑定和计算属性。

聚合物自定义元素定义包括普通的JavaScript / CSS,元素属性,生命周期回调和JavaScript方法。相比之下,VueJS允许轻松使用JavaScript / html和CSS。

Polymer使用Web组件功能,并且需要不支持这些功能的浏览器使用polyfill。 VueJS没有这种依赖性,并且在IE9 +的所有浏览器中都可以正常工作。