vue的理解

news2024/11/27 14:59:47

什么是vue

vue是一套用于构建用户界面的渐进式框架,与其他框架不同的是,vue被设计为可以自底向上逐层应用,它也是创建单页面应用的web应用框架。vue的核心库只关注视图层,不仅易上手,还便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用是,vue也能够为复杂的单页面应用提供驱动。

 

vue的核心特性

数据驱动(MVVM)

 

MVVM 表示的是 Model-View-ViewModel

 

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

 

view:视图层,负责将数据模型转化为UI展示出来

 

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

 

组件化

 

什么是组件化,就是把图形,非图形的各种逻辑抽象为一个统一的概念来实现开发的模式,在vue中每一个以.vue的文件都可以被视为一个组件;

 

组件化的好处

 

降低整个系统的耦合度,可以替换不同的组件快速完成需求

 

调试方便,由于整个系统是通过组件组合起来的,在出现为题的时候,可以快速定位到问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单的多

 

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

 

指令系统

 

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

 

常用指令

 

条件渲染指令:v-if

 

列表渲染指令:v-for

 

属性绑定指令:v-bind

 

事件绑定指令:v-on

 

双向数据绑定:v-model

 

vue于传统开发的区别:

vue的所有界面事件,都是只去操作数据的;

 

vue的所有界面变动,都是根据数据自动绑定出来的

 

vue和react对比:

相同点:

 

都有组件化的思想

 

都支持服务器端渲染

 

都有虚拟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.coloradmin.cn/o/2248480.html

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

相关文章

C++ 优先算法 —— 无重复字符的最长子串(滑动窗口)

目录 题目: 无重复字符的最长子串 1. 题目解析 2. 算法原理 Ⅰ. 暴力枚举 Ⅱ. 滑动窗口(同向双指针) 3. 代码实现 Ⅰ. 暴力枚举 Ⅱ. 滑动窗口 题目: 无重复字符的最长子串 1. 题目解析 题目截图: 此题所说的…

[网安靶场] [更新中] UPLOAD LABS —— 靶场笔记合集

GitHub - c0ny1/upload-labs: 一个想帮你总结所有类型的上传漏洞的靶场一个想帮你总结所有类型的上传漏洞的靶场. Contribute to c0ny1/upload-labs development by creating an account on GitHub.https://github.com/c0ny1/upload-labs 0x01:UPLOAD LABS 靶场初识…

安装python拓展库pyquery相关问题

我采用的是离线whl文件安装, 从官方库地址: https://pypi.org/, 下载whl文件, 然后在本地电脑上执行pip install whl路径文件名.whl 但是在运行时报错如下图 大体看了看, 先是说了说找到了合适的 lxml>2.1, 在我的python库路径中, 然后我去看了看我的lxml版本, 是4.8.0, 对…

春秋云境 CVE 复现

CVE-2022-4230 靶标介绍 WP Statistics WordPress 插件13.2.9之前的版本不会转义参数,这可能允许经过身份验证的用户执行 SQL 注入攻击。默认情况下,具有管理选项功能 (admin) 的用户可以使用受影响的功能,但是该插件有一个设置允许低权限用…

图论入门编程

卡码网刷题链接:98. 所有可达路径 一、题目简述 二、编程demo 方法①邻接矩阵 from collections import defaultdict #简历邻接矩阵 def build_graph(): n, m map(int,input().split()) graph [[0 for _ in range(n1)] for _ in range(n1)]for _ in range(m): …

Jackson库中JsonInclude的使用

简介 JsonInclude是 Jackson 库(Java 中用于处理 JSON 数据的流行库)中的一个注解。它用于控制在序列化 Java 对象为 JSON 时,哪些属性应该被包含在 JSON 输出中。这个注解提供了多种策略来决定属性的包含与否,帮助减少不必要的数…

鸿蒙学习自由流转与分布式运行环境-价值与架构定义(1)

文章目录 价值与架构定义1、价值2、架构定义 随着个人设备数量越来越多,跨多个设备间的交互将成为常态。基于传统 OS 开发跨设备交互的应用程序时,需要解决设备发现、设备认证、设备连接、数据同步等技术难题,不但开发成本高,还存…

【论文复现】融入模糊规则的宽度神经网络结构

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 融入模糊规则的宽度神经网络结构 论文概述创新点及贡献 算法流程讲解核心代码复现main.py文件FBLS.py文件 使用方法测试结果示例&#xff1a…

网上蛋糕售卖店管理系(Java+SpringBoot+MySQL)

摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装网上蛋糕售卖店管理系统软件来发挥其高效地信息处理的作用…

Vue.js基础——贼简单易懂!!(响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind)

Vue.js是一个渐进式JavaScript框架,用于构建用户界面。它专门设计用于Web应用程序,并专注于视图层。Vue允许开发人员创建可重用的组件,并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统,用于高效地渲染和重新渲染组件。Vue以…

从 0 到 1 掌握部署第一个 Web 应用到 Kubernetes 中

文章目录 前言构建一个 hello world web 应用项目结构项目核心文件启动项目 检查项目是否构建成功 容器化我们的应用编写 Dockerfile构建 docker 镜像推送 docker 镜像仓库 使用 labs.play-with-k8s.com 构建 Kubernetes 集群并部署应用构建 Kubernetes 集群环境编写部署文件 总…

数据结构 【二叉树(上)】

谈到二叉树,先来谈谈树的概念。 1、树的概念及结构 树是一种非线性的数据结构,它的逻辑关系看起来像是一棵倒着的树,也就是说它是根在上,而叶子在下的, 在树这种数据结构中,最顶端的结点称为根结点。在树的…

Error: Invalid version flag: if 问题排查

问题描述: 国产化系统适配,arm架构的centos 在上面运行docker 启动后需要安装数据库 依赖perl 在yum install -y perl 时提示: “Error: Invalid version flag: if”

QML学习 —— 34、视频媒体播放器(附源码)

效果 说明 您可以单独使用MediaPlayer播放音频内容(如音频),也可以将其与VideoOutput结合使用以渲染视频。VideoOutput项支持未转换、拉伸和均匀缩放的视频演示。有关拉伸均匀缩放演示文稿的描述,请参见fillMode属性描述。 播放可能出错问题 出现的问题:      DirectS…

架构-微服务-服务网关

文章目录 前言一、网关介绍1. 什么是API网关2. 核心功能特性3. 解决方案 二、Gateway简介三、Gateway快速入门1. 基础版2. 增强版3. 简写版 四、Gateway核心架构1. 基本概念2. 执行流程 五、Gateway断言1. 内置路由断言工厂2. 自定义路由断言工厂 六、过滤器1. 基本概念2. 局部…

洛谷 P1722 矩阵 II C语言 记忆化搜索

题目&#xff1a; https://www.luogu.com.cn/problem/P1722 我们按照案例画一下 我们会发现&#xff0c;会出现重复的子结构。 代码如下&#xff1a; #include<iostream> using namespace std; int mem[300][300]; int n; int f[305][305]; int dfs(int x,int red,…

PICO 获取设备号 SN码

Unity版本 2020.3.42f1c1PICO SDK版本PICO Unity Integration SDK-3.0.5-20241105Pico设备pico 4ultra 注意 此api暂时只测试企业版本 pico 4ultra 代码 using Unity.XR.PICO.TOBSupport;private void Awake() {bool result PXR_Enterprise.InitEnterpriseService();Debug.L…

从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘

从 HTML 到 CSS&#xff1a;开启网页样式之旅&#xff08;二&#xff09;—— 深入探索 CSS 选择器的奥秘 前言一、CSS基本选择器1. 通配选择器2. 元素选择器3. 类选择器4. id选择器5.基本选择器总结 二、CSS复合选择器1. 后代选择器2. 子选择器3. 相邻兄弟选择器4.交集选择器5…

解决Flink读取kafka主题数据无报错无数据打印的重大发现(问题已解决)

亦菲、彦祖们&#xff0c;今天使用idea开发的时候&#xff0c;运行flink程序&#xff08;读取kafka主题数据&#xff09;的时候&#xff0c;发现操作台什么数据都没有只有满屏红色日志输出&#xff0c;关键干嘛&#xff1f;一点报错都没有&#xff0c;一开始我觉得应该执行程序…

零基础3分钟快速掌握 ——Linux【终端操作】及【常用指令】Ubuntu

1.为啥使用Linux做嵌入式开发 能广泛支持硬件 内核比较高效稳定 原码开放、软件丰富 能够完善网络通信与文件管理机制 优秀的开发工具 2.什么是Ubuntu 是一个以桌面应用为主的Linux的操作系统&#xff0c; 内核是Linux操作系统&#xff0c; 具有Ubuntu特色的可视…