VueJS 概述
VueJS 概述
VueJS是一个用于开发交互式web项目的开源的渐进JavaScript框架。它是用来简化web开发的框架之一。VueJS聚焦在视图层上。它可以轻松地集成到前端开发的大型项目中,而不会出现任何问题。
VueJS的安装非常容易。任何开发人员都可以在短时间内轻松理解和构建交互式web页面。VueJS是由来自谷歌的前雇员EvanYou创建的。VueJS的第一个版本于2014年2月发布。它最近在github上拥有64,828颗星,因此非常受欢迎。
Vue的特征
VueJS有如下特征能。
虚拟Dom
VueJS使用虚拟DOM,不会对DOM进行更改,而是创建以JavaScript数据结构形式存在的DOM副本。每当要进行更改时,都会对JavaScript数据结构进行更改,并将后者与原始数据结构进行比较。最后的更改将被更新为真实的DOM,用户将看到这些更改。这在优化方面是好的,它的开销更小且可以更快地进行改变。
数据绑定
数据绑定功能有助于操作HTML属性或为其分配值、更改样式、借助VueJS提供的名为v-bind的绑定指令分配。
组件
组件是创建自定义元素的重要功能之一,这些元素可以在HTML中重用。
事件处理
v-on是添加到DOM元素的属性,用于侦听VueJS中的事件。
动画/变换
VueJS提供了在HTML元素被添加/更新或删除时应用转换的各种方法。VueJS有一个内置的转换组件,需要围绕元素进行包装以实现转换效果。我们可以轻松地添加第三方动画库,并为页面添加更多的交互性。
计算性质
这是VueJS的重要特性之一。它有助于侦听对UI元素所做的更改并执行必要的计算。因此不需要额外的编码。
模板
VueJS提供了基于HTML的模板,这些模板将DOM与Vue实例数据绑定在一起。vue将模板编译为虚拟DOM渲染函数。我们可以使用渲染函数的模板,为此我们必须用渲染函数替换模板。
指令
VueJS具有内置指令,例如v-if, v-else, v-show, v-on, v-bind和 v-model,这些指令常用于在前端执行各种操作。
观察者
观察器应用于监控更改的数据。例如输入元素。在这里,我们不需要添加任何附加事件。监视程序负责处理任何数据更改,使代码简单而快速。
路由选择
在vue-router的帮助下进行页面之间的导航。
轻量级
VueJS脚本非常轻量级,性能也非常快。
虚拟仪器
可以使用vue-CLI命令行界面在命令行上安装VueJS。它有助于使用vue -CLI轻松构建和编译项目。
跟其他框架的比较
现在让我们比较一下VueJS跟其他框架(如React, Angular, Ember, Knockout, Polymer)。
VueJS vs React
Virtual DOM
虚拟DOM是DOM树的虚拟表示。对于虚拟DOM,将创建一个与真实DOM相同的JavaScript对象。每当需要对DOM进行更改时,都会创建一个新的JavaScript对象并进行更改。稍后,将比较两个JavaScript对象,并在实际DOM中更新最终的更改。
VueJS和React都支持虚拟DOM,并且都处理的很好。
Template vs JSX
VueJS分别使用html、js和CSS。初学者很容易理解和采用VueJS风格。基于模板的VueJS方法非常简单。
React使用jsx方法,ReactJS的所有内容(js,html,css)都是JavaScript的一部分。
安装工具
React使用create react app命令,VueJS使用 vue-cli /CDN/npm,两者都非常容易使用。react需要webpack来构建,而VueJS则不需要。我们可以直接从cdn库中引用VueJS库开始编码。
流行度
React比VueJS流行一些. React的工作机会比VueJS多。React背后有一个大公司支持,即Facebook,这使它更受欢迎。因为,React使用了JavaScript的核心概念,所以它使用了JavaScript的最佳实践。与React一起工作的人肯定对所有的JavaScript概念都很好。
VueJS是一个开发框架。目前,与VueJS相比,VueJS的工作机会相对较少。但是Vue正在慢慢的流行起来,越来越多的公司在项目中使用它,也许这也是你看到这套教程的原因:)。Vue有一个很好的社区在研究VueJS的不同特性。vue-router由该社区维护,并定期更新。
VueJS由于其足够轻量,所以与 、React/Angular相比它要快得多。
VueJS vs Angular
相似程度
VueJS与Angular有很多相似之处。指令如v-if、v-for几乎与Angular的ngIf、ngFor相似。它们都有一个用于项目安装和构建的命令行界面。VueJS使用的是Vue-CLI,而angle使用的是Angular-CLI。两者都提供双向数据绑定、服务器端呈现等。
复杂性
Vuejs非常容易学习和开始。对于Angular,我们需要经过一系列的安装步骤,初学者学习使用Angular需要一些门槛。它使用TypeScript进行编码,这对于只有JavaScript经验的人来说有点困难。然而,对于具有Java和c#背景的用户来说,更容易学习。
性能
性能如何,取决于用户。VueJS文件的大小比Angular文件轻得多。这个链接提供了框架性能的比较,http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
流行性
Angular比VueJS更受欢迎。许多组织使用Angular。就业机会也更多。然而,VueJS在市场中占据了一席之地,可以被认为是一个很好的Angular和React的竞争对手。
依赖关系
Angular提供了许多内置功能。我们必须导入所需的模块并开始使用它,例如@angular/animation、@angular/form。
VueJS并不具备所有内置的Angular特性,需要依赖第三方库来进行工作。
灵活性
VueJS可以轻松地与任何其他大型项目合并,而不会出现任何问题。Angular将不会那么容易。
兼容性
Angular目前版本很多,并且每个大版本之间有很大差异。由于核心差异,在Angular1.x中开发的项目无法转换为Angular2.x。
VueJS的最新版本是2.0,具有良好的向后兼容性。它提供了很好的文档,很容易理解。
TypeScript支持
Angular使用TypeScript进行编码。用户需要学习才能开始Angular的开发。但是,我们可以直接引用Vue的CDN库开始开发VueJS项目。我们可以使用JavaScript进行项目开发,这是一个优势。
VueJS vs Ember
相似程度
Ember提供了Ember命令行工具,即Ember-CLI,以便于安装和编译Ember项目。
VueJS也提供了命令行工具vue-CLI来启动和构建项目。
它们都具有路由器、模板和组件等功能,使它们作为UI框架非常丰富。
性能
与Ember相比,VueJS具有更好的性能。ember添加了一个flight渲染引擎,目的是提高重新渲染性能,这是一个类似于VueJS的概念,并使用虚拟DOM进行反应。然而,与Ember相比,VueJS具有更好的性能。
VueJS vs Knockout
Knockout提供了良好的浏览器支持。IE的较低版本支持它,而IE8及以下版本不支持VueJS。不过随着时间的推移,老旧的浏览器已经被淘汰,低版本的困扰将不复存在。
另一方面,VueJS已经开始受到Vue团队的欢迎,他们提供定期更新。
VueJS vs Polymer
Polymer是由谷歌开发的。它被用于许多谷歌项目,如谷歌I/O、谷歌地球、谷歌播放器等。它提供类似于VueJS的数据绑定和计算属性。
Polymer自定义元素定义包括纯JavaScript/CSS、元素属性、生命周期回调和JavaScript方法。相比之下,VueJS允许轻松使用JavaScript/html和CSS。
Polymer使用web组件功能,并要求浏览器使用聚合功能,但浏览器不支持这些功能。VueJS不具有这种依赖关系,并且在IE9+的所有浏览器中都可以正常工作。