【零基础入门VUE】VueJS - 概述

2023-12-26 14:17:18

??面向读者:所有人

?所属专栏:零基础入门VUE专栏https://blog.csdn.net/arthas777/category_12537076.html

目录

特征

虚拟DOM

数据绑定

成分

事件处理

动画/过渡

计算属性

模板

指令

观察者

路由

轻的

Vue-CLI

与其他框架的比较

VueJS 与 React

VueJS 与 Angular

VueJS 与 Ember

VueJS 与淘汰赛

VueJS 与 Polymer


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 编码。

人气

根据调查,很多人正在适应 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 小得多。以下链接提供了框架性能的比较Table Report

依赖关系

Angular 提供了很多内置功能。我们必须导入所需的模块并开始使用它,例如@Angular/animations、@Angular/form。

VueJS 不具备 Angular 的所有内置功能,需要依赖第三方库才能使用。

灵活性

VueJS 可以轻松地与任何其他大型项目合并,没有任何问题。Angular 与任何其他现有项目一起使用并不容易。

向后兼容性

我们有 AngularJS、Angular2,现在还有 Angular4。AngularJS 和 Angular2 有很大的区别。由于核心差异,使用 AngularJS 开发的项目应用程序无法转换为 Angular2。

打字稿

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+ 的所有浏览器中正常工作。

文章来源:https://blog.csdn.net/arthas777/article/details/135216867
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。