【Vue】Vue的简介和特性

news2025/1/6 18:27:13

一、Vue简介

Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架。专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API简洁。

1. 构建用户界面

前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、好用的网页。

1.1 构建用户界面的传统方式

传统的 Web 前端开发中,是基于 jQuery + 模板引擎 的方式来构建用户界面的。

1.2 使用 vue 构建用户界面

使用 vue 构建用户界面,解决了 jQuery + 模板引擎 的诸多痛点,极大的提高了前端开发的效率和体验。

2. 渐进式

渐进式代表的含义是:Vue被设计成可以自底向上逐层应用可以整合第三方的库主张最少

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

3. 框架

框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能。

官方给 vue 的定位是前端框架,因为它提供了构建用户界面的一整套解决方案(俗称 vue 全家桶):

  • vue(核心库)

  • vue-router(路由方案)

  • vuex(状态管理方案)

  • vue 组件库(快速搭建页面 UI 效果的方案)

以及辅助 vue 项目开发的一系列工具:

  • vue-cli(npm 全局包:一键生成工程化的 vue 项目 - 基于 webpack、大而全)

  • vite(npm 全局包:一键生成工程化的 vue 项目 - 小而巧)

  • vue-devtools(浏览器插件:辅助调试的工具)

  • vetur(vscode 插件:提供语法高亮和智能提示)

要学习 vue,就是在学习 vue 框架中规定的用法,如vue 的指令、组件(是对 UI 结构的复用)、路由、Vuex、vue 组件库。

4. 双向数据绑定

vue.js 会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。这也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。

二、Vue的特点

1. 轻量级

Angular的学习成本高,使用起来比较复杂,而Vue相对简单、直接,所以Vue使用起来更加友好。

2. 组件化

Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

3. 指令

指令主要包括内置指令自定义指令,以“v-”开头,作用于HTML元素。指令提供了一些特殊的特性, 将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。 例如,v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。

4. 插件

插件用于对Vue框架功能进行扩展,通过MyPlugin.install完成插件的编写,简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。

三、Vue的特性

vue 框架的特性,主要体现在如下两方面:

    • 数据驱动视图

数据:渲染页面期间需要用到的数据——API接口返回的数据 或 程序用写死的假数据

视图:最终渲染出来的页面的DOM结构。

在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。即数据的变化驱动视图自动更新。示意图如下:

好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来。

注意:数据驱动视图是单向的数据绑定,即数据的变化导致页面更新。

2. 双向数据绑定

在网页中,form 表单负责采集数据,Ajax 负责提交数据

在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步数据源中。示意图如下:

双向:

  • js 数据的变化,会被自动渲染到页面上

  • 页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中

好处:开发者不再需要手动操作 DOM 元素,来获取表单元素最新的值

注意:数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例),具体MVVM概念请观看以下博客:【软件架构模式】MVVM模式和MVC模式区别_早睡早起长头发的博客-CSDN博客_mvvc模式

四、Vue与React的区别

Vue很多特性与Angular和React有着相同的地方,但是也有着性能方面的差别。

Vue使用基于依赖追踪的观察系统并且使用异步队列更新,所有的数据都是独立触发的,提高了数据处理能力。

React和Vue的中心思想是一切都是组件,组件之间可以实现嵌套。React 采用了特殊的JSX语法,Vue中也推崇编写以*.vue后缀命名的文件格式,对文件内容都有一些规定, 两者需要编译后使用。

值得一提的是,React依赖虚拟DOM,而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等,可以非常方便和快捷地操作DOM。推荐将Vue 使用到具有复杂交互逻辑的前端应用中,以确保用户的体验效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/189771.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Day 15 SpringBoot Condition

1 Condition作用:该功能可以选择性的创建Bean1.1 验证在Spring的IOC容器中有一个User的 Bean,现要求导入Jedis坐标后,加载该Bean,没导入,则不加载。【第一步】创建User对象Repository Conditional(ClassCondition.clas…

【yolov5系列】yolov5-onnxruntime在Ubuntu和RK芯片上运行

前言 这里yolov5的onnx模型的推理,分别在 x64上 和 移动端上运行,前者在自己本地Ubuntu系统上运行,后者在瑞芯微的rk3566上运行。 要完成如上工作我们需要一下步骤: 1 下载onnxruntime编译好的库2 下载opencv库并安装3 下载交叉编…

88E1548P大流量传输插拔网线导致网络不通

1、测试环境硬件:NXP LS1046A ARM64平台 88E1548P 软件:linux 4.19.26 linux 5.10.35环境说明:88E1548P 是一个QSGMII 的 phy 芯片,LS1046A CPU 提供4个GMAC 与 88E1548P 连接,就是4个千兆网口。2、具体现象eth7发包…

OFDM系统架构梳理(1)

1、ofdm简介OFDM是一种特殊的多载波传输方案,它可以被看作是一种调制技术,也可以被当作一种复用技术。多载波传输把数据流分解成若干子比特流,这样每个子数据流将具有低得多的比特速率,用这样的低比特率形成的低速率多状态符号再去…

Spring Batch 批处理-步骤Step与Tasklet

引言 接着上篇:Spring Batch 批处理-执行上下文,了解作业执行上下文后,本篇就来了解一下Spring Batch批处理步骤Step对象与任务处理对象Tasklet,看下Spring Batch 如何运作的。 步骤介绍 一般认为步骤是一个独立功能组件&#…

密码学大咖DavidWong历经数年创作编写而成的这本书

从我开始写本书到图书出版已经有几年了。最初,我打算将本书作为介绍现实世界常用密码原语的图书。但是,这显然是一件不可能完成的事情。任何一个领域都不可能用一本书来总 结清楚。出于这个原因,我必须在知识的深度和广度之间找到平衡。我希望…

3.6双端口RAM和多模块存储器

文章目录关键词正文一、存取周期二、引子三、双端口RAM四、多体并行存储器&#xff08;1&#xff09;高位交叉编址方式&#xff08;2&#xff09;低位交叉编址方式&#xff08;3&#xff09;编址&#xff08;4&#xff09;特性举例<1> 高位交叉编址<2> 低位交叉编址…

word实用技巧:拼音指南用法及注意事项

如果你是一位语文老师&#xff0c;在为学生准备试卷时&#xff0c;时常会用到Word拼音指南功能&#xff1b;如果你是一位职场白领&#xff0c;在为领导准备发言稿、颁奖名单时&#xff0c;以防领导读错音&#xff0c;也会用到Word拼音指南功能对生僻字&#xff0c;多音字进行单…

RabbitMQ 获取消息(Ack Mode)

在服务器端的客户端页面从队列中获取消息是一个危险的动作&#xff0c;生产环境一定要了解业务之后再做操作。 Act Mode Nack message requeue true 接收消息但不做确认&#xff0c;消息会重新加入队列 Automatic ack 获取消息&#xff0c;应答确认&#xff0c;消息不…

C#,编程语言的基本概念与知识点

本文归纳整理C#的一些知识点&#xff0c;便于快速浏览与掌握C#语言的一些基本概念。本文并没有很好地层次与组织&#xff0c;抄了不少&#xff0c;写了不少&#xff0c;想到什么&#xff0c;就写什么。01 类 class类是C#等面向对象编程语言&#xff08;Object-oriented program…

分享152个ASP源码,总有一款适合您

ASP源码 分享152个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 152个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1fOOs06p6YghEzceqJ4twaA?pwd0p4z 提取码&#x…

Vue-透传Attributes使用解析

透传是vue中一种特性&#xff0c;官方的解释是&#xff1a;“透传 attribute”指的是传递给一个组件&#xff0c;却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。这句话解释过来就是一些不被prop定义的属性直接…

面对层出不穷的问题,延迟开学的原因就是取消延时服务?

面对层出不穷的问题&#xff0c;延迟开学的原因就是取消延时服务&#xff1f; #延迟开学#请问为什么要延迟&#xff1f;疫情期间说要回家可以理解&#xff0c; 这两天都传着说郑州市的中小学、幼儿园推迟开学了&#xff0c;到底有没有这种情况&#xff1f;我们现在又来到了郑…

零基础入行软件测试怎么学习~

随着近几年软件测试行业的异军突起&#xff0c;加之这又是个进入门槛相对较低的行业&#xff0c;导致不少人都想从事这个岗位。那么&#xff0c;许多初学者在一开始都会想知道&#xff0c;零基础入门软件测试要学什么?希望本文可以对大家的软件测试学习之路有一定的指导意义&a…

Vue实现考勤记录删除-自定义右击删除菜单

一、定义和使用oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。注意&#xff1a;所有浏览器都支持 oncontextmenu 事件&#xff0c; contextmenu 元素只有 Firefox 浏览器支持。二、语法HTML 中:<element oncontextmenu"myScript">JavaScript…

RabbitMQ面试题

什么是 MQ MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已。 还是一种跨进程的通信机制&#xff0c;用于上下游传递消息。 在互联网架构中&#xff0c;MQ 是一种非常常见的…

一文走进多核架构下的内存模

一、走进多核编程CPU 发展早期阶段&#xff0c;性能的提升主要来自于主频的提升和架构的优化&#xff0c;当这条优化途径出现瓶颈后&#xff0c;多核 CPU 开始流行起来。多核心同时执行任务极大地提高了系统整体性能&#xff0c;但也对硬件架构和软件编写提出了更大的挑战。各个…

C语言#define的用法

#define 叫做宏定义命令&#xff0c;它也是C语言预处理命令的一种。所谓宏定义&#xff0c;就是用一个标识符来表示一个字符串&#xff0c;如果在后面的代码中出现了该标识符&#xff0c;那么就全部替换成指定的字符串。我们先通过一个例子来看一下 #define 的用法&#xff1a;…

【Spring(九)】带你了解Spring整合MyBatis的详细过程

文章目录前言Spring整合mybatis思路分析Spring整合MyBatis总结前言 前面我们已经学习完了Spring的注解开发&#xff0c;接下来我们来学习Spring整合MyBatis&#x1f4aa;&#x1f4aa;。 Spring整合mybatis思路分析 整合其实我们在核心容器中已经完成了一个东西了:DruidDataSou…

Hue使用

文章目录HUE功能概览界面介绍Quick browseApp应用 App* 编辑器 【Editor】调度器 【Scheduler】浏览 Browsers*【Documents】【File Browser】HDFS【Job Browser】YARN、oozie【Table Browser】Hive、mysql、SQLite...【HBase Browser】HbaseHUE 在hue.ini 配置集成其他服务&a…