Vue理解

2023/6/5 20:40:41

1.是什么?

Vue是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的web应用框架。Vue所关注的核心是MVC模式中的视图层,同时它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。

2.Vue核心特性

(1)数据驱动(MVVM:Model View ViewModel)

Model:模型层,负责处理业务逻辑以及和服务器端交互。

View:视图层,负责将数据模型转化为UI展示出来,简单理解即html页面。

ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁。

(2)组件化

组件化即把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件2.组件化的优势:

  • 降低整个系统的耦合读。在保持接口不变的情况下,可以替换不同的组件快速完成需求,例如输入框可以替换为日历、时间、范围等组件作具体的实现

  • 调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除发直接移除组件,或这根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件直接低耦合,职责单一,所以逻辑会比分析整个系统要简单。

  • 提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行和优化可获得系统的整体升级。

(3)指令系统

指令即带有v-前缀的特殊属性,作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。

常用的指令:v-if条件渲染指令、v-for列表渲染指令、v-bind属性绑定指令、v-on事件绑定指令、v-model双向数据绑定指令

3.Vue跟传统开发的区别

传统开发:用jQuery选择流程dom对象,点击按钮隐藏当前流程dom对象,显示下一流程dom对象。

vue开发:视图层使用一变量控制dom节点显示与否,点击按钮则改变该变量。双向绑定使dom节点跟视图绑定后,通过修改变量的值控制dom节点的各类属性。

总结:Vue所有的界面事件,都是只去操作数据的,jQuery操作DOM。

Vue所有界面的变动,都是根据数据自动绑定出来的,Jquery操作DOM。

4.Vue和React对比

相同点:都有组件化思想;都有支持服务器端渲染;都有虚拟DOM(Virtual DOM);数据驱动视图;都有支持native的方案(Vue的weex、React的React native);都有自己的构建工具(Vue的vue-cli、React的Create React App)

区别:

数据流向不同(React从诞生开始就推崇单向数据流,而Vue是双向数据流)

数据变化的实现原理不同(React使用的是不可变数据,而Vue使用的是可变数据)

组件化通信的不同(React中我们通过使用回调函数来进行通信,而Vue中子组件向父组件传递信息有两种:事件和回调函数)

diff算法不同(React主要使用diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。Vue使用双向指针,边对比,边更新DOM)


http://www.jnnr.cn/a/273068.html

相关文章

基于51单片机的脉搏测量仪protues仿真设计

目录 一、设计背景 二、实现功能 三、仿真演示 四、源程序 一、设计背景 在中医四诊(望﹑闻﹑问﹑切)中,脉诊占有非常重要的位置。脉诊是我国传统医学中最具特色的一项诊断方法,其历史悠久,内容丰富,是中医“整体观…

SpringIOC之注解与Bean生命周期的关联

简述:我们在 Spring 中通常以这两种方式定义一个 Bean:面向资源(XML、Properties)、面向注解。如今 Spring Boot 被广泛应用,通过注解定义一个 Bean 的方式变得更为普遍,因为在实际的开发过程中注解的方式相…

Python---私有化

专栏:python 个人主页:HaiFan. 专栏简介:Python基础已经更新完,接下来是Python面向对象的知识点。 私有化前言私有化属性set和get装饰器property前言 在做程序的过程中,有时候程序猿不想让外人动一些值,这…

Windows Server 2016 Evaluation评估版频繁自动关机

安装了一台 Windows Server2016,总是莫名其妙经常自动关机。尝试进行kms激活失败,网上查找了一些资料,发现跟安装的Evaluation版本相关,于是尝试进行版本的替换。 步骤: 1、查看本机 Edition ID 输入:DI…

【QT】C++和QML使用多线程优化界面切换卡顿的方法

qt提供了一种声明式语言qml,可以使用一些可视组件以及这些组件之间的交互来描述用户界面,而c可以只负责后台逻辑的处理,将界面和后台分离开来,由qml来做UI界面,c负责后端处理,对我个人来说,这样…

html+css网页练习三

文章目录一、登录注册页面1、要求2、效果图3、index.html4、style.css二、发展历程页面1、要求2、效果图3、index.html4、style.css三、Web技术社区页面1、要求2、效果图3、index.html4、style.css四、电商网站注册、登录页面1、要求2、效果图3、index.html4、style.css素材在我…

MoCoViT: Mobile Convolutional Vision Transformer

paper链接: https://arxiv.org/abs/2205.12635v1 MoCoViT: Mobile Convolutional Vision Transformer(一)、引言(二)、实现细节(一)、Mobile Self-Attention (MoSA)(二)、Mobile Feed Forward Network (MoFFN)(三)、Mobile Transformer Block (MTB)(四)、Building efficient ne…

微信小程序学习第5天——页面导航(声明式与编程式导航)与页面事件(上拉与下拉刷新)

一、页面导航 1、导航方式 小程序的2种页面导航方式&#xff1a;①声明式导航 ② 编程式导航 区别声明式导航编程式导航跳转方式点击 <navigator>组件实现页面跳转调用小程序的导航API实现页面跳转导航到tabBar页面指定url和open-type属性值为switchTab&#xff08;op…

Linux线程理解

&#x1f9f8;&#x1f9f8;&#x1f9f8;各位大佬大家好&#xff0c;我是猪皮兄弟&#x1f9f8;&#x1f9f8;&#x1f9f8; 文章目录一、线程概念Linux特有线程方案二、什么是进程&#xff1f;资源角度在CPU的视角轻量级进程三、pthread线程库初使用pthread库的介绍pthread_…

【go语言grpc之server端源码分析】

go语言grpc之server端源码分析NewServerRegisterGreetsServerRegisterServiceregisterserver.ServenewHTTP2TransportnewLoopyWriter runserveStreamsHandleStreams上一篇文章分析了grpc的实现。接下来分析一个grpc的服务端和客户端的源码实现。这一篇分析源码端的实现&#xf…

第二章:ElasticSearch安装

上一章&#xff1a;《第一章&#xff1a;ElasticSearch简介》 安装方式主要有两种&#xff1a; 《docker安装elasticsearch》windows安装 docker安装方式可以点击上面的链接进行学习&#xff0c;本章主要介绍windows下的安装方式 2.1 下载压缩包 ElasticSearch的官方地址&a…

【微服务】Elasticsearch常用查询结果处理(三)

&#x1f697;Es学习第三站~ &#x1f6a9;Es学习起始站&#xff1a;【微服务】Elasticsearch概述&环境搭建(一) &#x1f6a9;本文已收录至专栏&#xff1a;微服务探索之旅 &#x1f44d;希望您能有所收获 在上一站的学习中&#xff0c;我们已经导入了大量数据到es中&…

软件架构设计(一)——软件架构风格

目录 一、软件架构概念 二、软件架构建模概念 三、软件架构的风格 1.数据流风格 (1)管道—过滤器 (2)批处理序列 2. 调用/返回风格 3.独立构件风格 (1).进程通信 和 事件驱动系统(隐式调用) 4.虚拟机风格 5.仓库风格 (1).数据库系统 (2).黑板系统 (3).超文本系统 6…

实战34:基于CNN卷积神经网络实现数学题对错识别 附完整代码

亮出效果 要不要自己做一个自动批改的功能啊?万一哪天孩子要用呢!功能简介: 作对了,能打对号;做错了,能打叉号;没做的,能补上答案。 功能简介: 作对了,能打对号;做错了,能打叉号;没做的,能补上答案。

Mybatis持久层框架 | CRUD

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; CRUD CRUD是指在做计算处理时的增加(Create)、读取(Read)、更新(Update)和删除(Delete)&#xff1a;主要被用在描述软件系统中数据库或者持久层的基本操作功能 环境准…

设计模式 - 结构型模式_代理模式

文章目录结构型模式概述CaseCode结构型模式 结构型模式主要是解决如何将对象和类组装成较大的结构&#xff0c; 并同时保持结构的灵活和⾼效。 结构型模式包括&#xff1a;适配器、桥接、组合、装饰器、外观、享元、代理&#xff0c;这7类 概述 代理模式有点像⽼⼤和⼩弟&…

数据结构与算法-单链表

Java高级系列文章前言 本文章涉及到数据结构与算法的知识&#xff0c;该知识属于Java高级阶段&#xff0c;通常为学习的二阶段&#xff0c;本系列文章涉及到的内容如下&#xff08;橙色框选内容&#xff09;&#xff1a; 本文章核心是教学视频&#xff0c;所以属于个人笔记&a…

基于微信小程序的火锅店点餐系统小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…

docker 的资源控制和数据管理

目录 一、docker 的资源控制 1、CPU资源控制 1.1 设置cpu 使用率上限 1.2 进行CPU 压力测试 1.3 设置cpu 使用时间上限 1.4 设置cpu 资源占比(多个容器时才有效) 1.5 指定容器绑定cpu 2、对内存使用的限制 3、对磁盘IO 配置控制的限制 二、数据管理 1、数据卷 2、…

Go性能调优及相关工具使用(四)——性能调优工具pprof的使用

文章目录一、本次学习重点内容&#xff1a;本堂课的知识要点有哪些&#xff1f;1、性能发现工具pprof2、性能调优案例二、详细知识点介绍&#xff1a;1、性能调优简介性能调优原则:2、性能发现工具pprof说明&#xff1a;pprof 功能简介3、pprof 排查实战CPU&#xff1a;使用任务…