开发手册 欢迎您!
软件开发者资料库

VueJS - 概述

VueJS概述 - 从简单和简单的步骤学习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的副本,其以JavaScript数据结构的形式存在.无论何时进行任何更改,都将对JavaScript数据结构进行更改,并将后者与原始数据结构进行比较.然后将最终更改更新为真实DOM,用户将看到更改.这在优化方面是好的,它更便宜,并且可以更快的速度进行更改.

数据绑定

数据绑定feature有助于操作或赋值给HTML属性,更改样式,借助VueJS提供的名为 v-bind 的绑定指令分配类.

组件

组件是VueJS的重要功能之一,它有助于创建自定义元素,可以在HTML中重复使用.

事件处理

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

动画/转换

VueJS提供了各种方法,可以在添加/更新或从DOM中删除HTML元素时应用转换. 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 v/s React

虚拟DOM

Virtual 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使用创建反应应用和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,它具有向后兼容性.它提供了很好的文档,很容易理解.

Typescript

Angular使用TypeScript进行编码.用户需要掌握Typescript知识才能开始使用Angular.但是,我们可以使用cdn库在jsfiddle或codepen中的任何地方开始VueJS编码.我们可以使用标准的JavaScript,这很容易入手.

VueJS v/s Ember

相似之处

Ember提供了Ember命令行工具,即ember-cli,便于安装和编译Ember项目.

VueJS还有一个命令行工具vue -cli开始和构建项目.

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

表现

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

VueJS v/s Knockout

Knockout提供了良好的浏览器支持. IE的较低版本支持它,而IE8及以下版本不支持VueJS.随着时间的推移,淘汰赛的发展速度已经放缓.近期并没有太大的受欢迎程度.

另一方面,VueJS开始越来越受欢迎,Vue团队提供定期更新.

VueJS v/s Polymer

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

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

Polymer使用Web组件功能,并且需要用于浏览器的polyfill,它不支持这些功能. VueJS没有这样的依赖关系,并且在IE9 +的所有浏览器中都能正常工作.