Vue.js是一个渐进式JavaScript框架,用于开发交互式web界面,主要集中在视图方面,即前端开发,Vue.js可以很容易地和其它的项目或第三方库集成,Vue.js的安装和部署也相当简单,一个入门的开发者可以很容易地明白并且可以快速地构建所需的界面。
本文主要和你综合讲解Vue.js的主要特性,这些特性可以说是Vue.js的全部功能内容,大体理解一下可以帮助我们对Vue.js有个全面的了解,Vue.js相对于React还是相当简单的,所以只要我们对Vue.js的主要功能特性有个总体的掌握,那么使用Vue.js即不会迷失方向,但实际上可能学习每一个开发框架都可能会导致有所缺漏。
Vue.js是目前最受欢迎的前端框架之一,作者是Google的前员工尤雨溪,是一个华人,第一个版本在2014年4月发布,不久就在Github上获得了很多的star数,Vue.js是目前国内使用较多的前端框架,下面我们简略看一下Vue.js的相关特性。
1、虚拟DOM
VueJS使用虚拟DOM,其他框架(如React、Ember等)也使用虚拟DOM。不会对DOM进行更改,而是创建DOM的副本,该副本以JavaScript数据结构的形式呈现。无论何时进行任何更改,都要对JavaScript数据结构进行更改,并将JavaScript数据结构与原始数据结构进行比较。最后的更改将被更新到真实的DOM,用户将看到更改。这在优化方面很好,成本更低,并且可以以更快的速度进行更改。
2、数据绑定
数据绑定特性帮助操作或为HTML属性赋值、更改样式、在VueJS中提供的名为v-bind的绑定指令的帮助下分配类。
3、组件化
组件是VueJS的重要特性之一,它有助于创建可在HTML中重用的自定义元素。
4、事件处理
v-on是添加到DOM元素的属性,用于侦听VueJS中的事件。
5、动画/过渡
VueJS提供了在添加/更新或从DOM中删除HTML元素时将转换应用到这些元素的各种方法。VueJS有一个内置的转换组件,需要围绕元素来实现转换效果。我们可以很容易地添加第三方动画库,也可以在界面中添加更多的交互性。
6、计算属性
这是VueJS的重要特性之一。它有助于侦听对UI元素所做的更改并执行必要的计算。不需要为此编写额外的代码。
7、Vue模板
VueJS提供了基于html的模板,这些模板将DOM与Vue实例数据绑定在一起。Vue将模板编译成虚拟DOM呈现函数。我们可以使用呈现函数的模板,为此我们必须用呈现函数替换模板。
8、Vue指令
VueJS有内置的指令,如v-if、v-else、v-show、v-on、v-bind和v-model,这些指令用于在前端执行各种操作。
9、监听属性
观察者应用于变化的数据。例如,表单输入元素。在这里,我们不需要添加任何额外的事件。Watcher负责处理任何数据更改,使代码简单而快速。
10、Vue路由
页面之间的导航是在vue-router的帮助下完成的。
11、轻量级
VueJS脚本非常轻量级,性能也非常快。
12、Vue-CLI
VueJS可以使用vue-cli命令行接口安装在命令行上。它有助于使用vue-cli轻松地构建和编译项目。
VueJS和React的对比,Vue和React有什么区别和优势?
1、虚拟DOM
虚拟DOM是DOM树的虚拟表示。使用虚拟DOM,可以创建与实际DOM相同的JavaScript对象。每当需要对DOM进行更改时,都会创建一个新的JavaScript对象并进行更改。稍后,比较JavaScript对象,并在实际DOM中更新最后的更改。VueJS和React都使用虚拟DOM,这使得它更快。
2、模板vs JSX
VueJS分别使用html、js和css。初学者很容易理解并采用VueJS风格。基于模板的VueJS方法非常简单。React使用jsx方法。所有东西都是JavaScript for ReactJS。HTML和CSS都是JavaScript的一部分。
3、安装工具
React使用create React app, VueJS使用vue-cli /CDN/npm。这两种方法都非常容易使用,并且该项目具有所有基本需求。React需要webpack来构建,而VueJS不需要。我们可以从使用cdn库在jsfiddle或codepen中的任何地方编写VueJS代码开始。
4、受欢迎程度
React比VueJS更受欢迎。有反应的工作机会不仅仅是VueJS。React背后有个大名鼎鼎的名字,也就是Facebook,这让它更受欢迎。因为React使用JavaScript的核心概念,所以它使用了JavaScript的最佳实践。使用React的人肯定会非常擅长所有JavaScript概念。VueJS是一个正在开发的框架。目前,与VueJS的就业机会相比,反应较少。根据一项调查,许多人正在适应VueJS,这使得它比React和Angular更受欢迎。有一个很好的社区致力于VueJS的不同特性。vue-router由这个社区定期更新来维护。VueJS从Angular和React中汲取了优秀的部分,并构建了一个强大的库。与React/Angular相比,VueJS要快得多,因为它的库很轻量级。
VueJS和Angular之间的对比,VueJS和Angular有什么区别和优势?
1、相似之处
VueJS与Angular有很多相似之处。像v-if,
v-for这样的指令与Angular的ngIf, ngFor几乎是相似的。它们都有用于项目安装和构建的命令行接口。VueJS使用Vue-cli, Angular使用Angular -cli。两者都提供双向数据绑定、服务器端呈现等功能。
2、复杂性
Vuejs是非常容易学习和开始。如前所述,初学者可以使用VueJS的CDN库,并开始使用codepen和jsfiddle。
对于Angular,我们需要经历一系列的安装步骤,对于初学者来说,开始使用Angular并不难。它使用TypeScript进行编码,这对于来自核心JavaScript背景的人来说是很困难的。但是,对于属于Java和c#背景的用户来说,它更容易学习。
3、性能
性能由用户决定。VueJS的文件大小比Angular小得多。下面的链接http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html提供了框架性能的比较
4、受欢迎程度
目前,Angular比VueJS更受欢迎。很多组织都使用Angular,这使得它非常受欢迎。有Angular经验的求职者也会得到更多的工作机会。然而,VueJS正在市场上占据一席之地,可以被认为是Angular和React的有力竞争者。
5、依赖关系
Angular提供了很多内置特性。我们必须导入所需的模块并开始,例如@angular/animation、@angular/form。
VueJS不具备Angular的所有内置特性,需要依赖第三方库才能实现。
6、灵活性
VueJS可以很容易地与任何其他大型项目合并,没有任何问题。Angular在开始处理任何其他现有项目时都不会那么容易。
7、向后兼容性
我们有角j,角2,现在是角4。AngularJS和Angular2有很大的差异。使用AngularJS开发的项目应用程序由于核心差异无法转换为Angular2。
VueJS的最新版本是2.0,具有良好的向后兼容性。它提供了很好的文档,非常容易理解。
8、TypeScript
Angular使用TypeScript进行编码。用户需要了解Typescript才能开始使用Angular。但是,我们可以从使用cdn库在jsfiddle或codepen中的任何地方编写VueJS代码开始。我们可以使用标准JavaScript,这是非常容易开始。