React 和 Vue _使用区别

目录

一、框架介绍

1.Vue

2.React

 二、框架结构

1.创建应用

2.框架结构

三、使用区别

1.单页面组成

2.样式

3.显示响应式数据

4.响应式html标签属性

5.控制元素显隐

6.条件渲染

7.渲染列表

react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。

一、框架介绍

1.Vue

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2.React

React是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库。

它允许您使用”components(组件)“（小巧而独立的代码片段）组合出各种复杂的UI。它具有组件化、虚拟DOM、单向数据流、JSX语法等特点。

它适用于构建单页应用程序、移动应用程序和桌面应用程序，具有庞大的生态系统和丰富的工具支持。React的组件化和可重用性使得开发人员能够以模块化的方式构建和组织应用程序，提高代码的可读性、可维护性和可测试性。通过使用React,开发人员可以构建复杂的、交互式的Wb应用程序，并在不同平台上实现代码的共享和复用。


 二、框架结构

1.创建应用

Vue创建一个项目：

创建一个vue项目icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/139147265?spm=1001.2014.3001.5501

React创建一个项目：

创建一个react项目icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/140011785?spm=1001.2014.3001.5501

2.框架结构

左侧React(ts版本)项目目录结构，右侧vue(js版本)项目目录结构。

      

 

三、使用区别

1.单页面组成

vue页面:

vue一个页面的组成，一个.vue文件包括了HTML、CSS、javascript。

App.vue：

<template><div></div>
</template><script>
//这部分是javascript代码
</script><style>
// 样式
</style>

react页面：

react的css在一个单独页面，html和jsvascript，在同一个页面。

新建一个文件夹test，test下新建两个文件，一个index.css (或者是index.scss ， 最好用scss), 一个index.tsx（或者index.jsx , 这取决于你新建项目时选择的js还是ts）。

index.css

.btn{color:red;
}

index.tsx

function MyButton() {return (<button className="btn">I'm a button</button>);
}export default function MyApp() {console.log("页面初始化")return (<div><h1>Welcome to my app</h1><MyButton /></div>);
}

上面所使用的标签语法被称为 JSX。它是可选的，但大多数 React 项目会使用 JSX，主要是它很方便。JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹.。

2.样式

vue页面：

App.vue:

<template><div class="box"><div style="width:60px"></div></div>
</template><script>
//这部分是javascript代码
</script><style scoped>
.box{background:red;
}
</style>

在vue里面，使用 class 为html元素命名。行内元素使用style=""的方式更改。

scoped属性进行限定css作用域，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。vue中的 scoped 属性，其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5），然后编译时再给样式的末尾添加  属性选择器 进行样式私有化（如.btn[data-v-6810cbe5]）。

react页面：

 index.css

.btn{color:red;
}

index.tsx

function MyButton() {return (<button className="btn">I'm a button</button>);
}export default function MyApp() {console.log("页面初始化")return (<div><h1 style={{color:"#eff"}}>Welcome to my app</h1><MyButton /></div>);
}

在react里面，使用 className 为html元素命名。行内元素使用style={{}}的方式更改。

在上面示例中，style={{}} 并不是一个特殊的语法，而是 style={ } JSX 大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时，你可以使用 style 属性。

react没有scoped,就会导致所有样式的className命名不能相同，否则不同页面会有干扰。我们可以使用依赖包来实现scoped的效果。

react 仿 vue 的 scoped:

①首先下载包

npm i styled-components

②在页面使用

import styled from 'styled-components';const Container = styled.div`display: flex;justify-content: center;align-items: center;height: 100vh;
`;function App() {return (<Container><h1>Hello, Scoped Styles!</h1></Container>);
}export default App;

3.显示响应式数据

vue页面：

<template><div>对话：{{divContent}}</div><div>计数：{{count}}</div>
</template><script setup>
import {ref, reactive, toRefs} from "vue";const count = ref(0)const state = reactive({divContent: "你好呀，今天天气真好",
});const {isShowDiv,
} = toRefs(state);setTimeout(()=>{state.divContent="你吃饭了吗？"
},3000)
//三秒后div内文字变为，你吃饭了吗？</script><style scoped>
</style>

div内展示数据 {{}} 的方式 叫文本插值，它使用的是“Mustache”语法 (即双大括号)。

ref , reactive 和 toRefs  ,是vue中明响应式状态的函数。当你在模板中使用了他们定义的变量，然后改变了这个 变量 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。

react页面：

import { useState } from "react";function App() {// content是内容，setContent是改变内容时用的方法const [content, setContent] = useState("今天天气真好")setTimeout(()=>{setContent("您吃了吗？")},3000)
//3秒后文字内容变成，您吃了吗？return (<div>{content}</div>);
}export default App;

div内展示数据使用 {} 。useState 是一个 React Hook，它允许你向组件添加一个状态变量。

4.响应式html标签属性

 vue页面：

<template><div :title="content"></div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({content: "鼠标悬浮显示，你好",
});const {content,
} = toRefs(state);setTimeout(()=>{state.content="鼠标悬浮显示，你吃饭了吗？"
},3000)</script><style scoped>
</style>

:title="content" ， ：是v-bind的缩写，动态的绑定一个或多个 attribute，也可以是组件的 prop。

react页面：

import { useState } from "react";function App() {// content是鼠标悬浮内容，setContent是改变鼠标悬浮内容时用的方法const [content, setContent] = useState("今天天气真好")setTimeout(()=>{setContent("您吃了吗？")},3000)
//3秒后鼠标悬浮文字内容变成，您吃了吗？return (<div title={content}>鼠标悬浮显示标题</div>);
}export default App;

title={content} ， {}内为变量。

5.控制元素显隐

 vue页面：

<template><div v-if="div1Show"></div><div v-show="div2Show"></div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({div1Show: true,div2Show: false,
});const {div1Show,div2Show,
} = toRefs(state);setTimeout(()=>{state.div1Show=falsestate.div2Show=true
},3000)
//div1元素在3秒后消失，div2元素在3秒后出现。</script><style scoped>
</style>

v-if ,vi-show基于表达式值的真假性，来改变元素的可见性。

当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件为false时，display值为 none 。

react页面：

import { useState } from "react";function App() {const [show, setShow] = useState(false)setTimeout(()=>{setShow(true)},3000)
//3秒后元素可见return (<div>{show && <div>三秒后可见哦~</div>}{show ? <div>show为true,显示我</div> : ""}</div>);
}export default App;

使用 && 或者三元运算符来判断显隐。

6.条件渲染

 vue页面：

<template><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({type:"A",
});const {type,
} = toRefs(state);setTimeout(()=>{state.type="C"
},3000)</script><style scoped>
</style>

和 if(){} else if(){} else if(){} else{} 同。控制元素的显隐。

react页面：

import { useState } from "react";function App() {const [show, setShow] = useState(false)setTimeout(()=>{setShow(true)},3000)
//3秒后元素可见if (show) {content = <AdminPanel />;
} else {content = <LoginForm />;
}return (<div>{show && <div>三秒后可见哦~</div>}{show ? <div>show为true,显示我</div> : <div>show为false,显示我</div>}{content}</div>);
}export default App;

使用if(){}else{}判断，或使用 && 或使用三元运算符来进行条件渲染。

7.渲染列表

 vue页面：

<template><div v-for="(item,index) in list">{{item}}</div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({list:[1,2,3,4],
});const {list,
} = toRefs(state);</script><style scoped>
</style>

v-for,基于原始数据多次渲染元素或模板块。

react页面：

import { useState } from "react";function App() {const products = [{ title: 'Cabbage', id: 1 },{ title: 'Garlic', id: 2 },{ title: 'Apple', id: 3 },];const listItems = products.map(product =><li key={product.id}>{product.title}</li>);return (<ul>{listItems}</ul>);}export default App;

使用[].map循环遍历。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

go-kratos 学习笔记(8) redis的使用

go-kratos 学习笔记(8) redis的使用

redis的在项目中的使用是很常见的&#xff0c;前面有了mysql的使用redis的也差不多&#xff1b;也是属于在data层的操作&#xff0c;所以需要新建一个 NewRedisCmd方法 在internal/data/data.go中新增NewRedisCmd 方法&#xff0c;注入到ProviderSet package dataimport (&quo…
阅读更多...
正则采集器之五——商品匹配规则

正则采集器之五——商品匹配规则

需求设计 实现分析 系统通过访问URL得到html代码&#xff0c;通过正则表达式匹配html&#xff0c;通过反向引用来得到商品的标题、图片、价格、原价、id&#xff0c;这部分逻辑在java中实现。 匹配商品的正则做成可视化编辑&#xff0c;因为不同网站的结构不同&#xff0c;同…
阅读更多...
论文阅读：A Survey on Evaluation of Large Language Models-鲁棒性相关内容

论文阅读：A Survey on Evaluation of Large Language Models-鲁棒性相关内容

A Survey on Evaluation of Large Language Models 只取了鲁棒性相关的内容 LLMs&#xff1a;《A Survey on Evaluation of Large Language Models大型语言模型评估综述》理解智能本质(具备推理能力)、AI评估的重要性(识别当前算法的局限性设 对抗鲁棒性是衡量大型语言模型&…
阅读更多...
ComfyUI 、ComfyUI-Manager、ComfyUI-Translation语言包、Insightface、Crystools资源监测器安装

ComfyUI 、ComfyUI-Manager、ComfyUI-Translation语言包、Insightface、Crystools资源监测器安装

简单介绍ComfyUI、ComfyUI-Manager、ComfyUI-Translation语言包、Insightface、Crystools资源监测器安装&#xff0c;并通过ComfyUI-Manager安装缺失的节点。 1、ComfyUI安装 打开https://github.com/comfyanonymous/ComfyUI&#xff0c;找到Installing中 Direct link to do…
阅读更多...
phpenv安装redis扩展

phpenv安装redis扩展

1、下载dll文件 https://pecl.php.net/package/redis 我的是php8.1, 安装最新版的 DLL文件 &#xff12;、将dll文件放到php安装目录的ext目录下 3、在php.ini中增加配置后重启服务 [Redis] extension php_redis.dll
阅读更多...
VMware安装（有的时候启动就蓝屏建议换VM版本）

VMware安装（有的时候启动就蓝屏建议换VM版本）

当你开始使用虚拟化技术来管理和运行多个操作系统时&#xff0c;VMware 是一个强大且广泛使用的选择。本篇博客将指导你如何安装 VMware Workstation Pro&#xff0c;这是一个功能强大的虚拟机软件&#xff0c;适用于个人和专业用户。 一、下载 VMware Workstation Pro 访问官网…
阅读更多...
JavaScript青少年简明教程：函数及其相关知识（上）

JavaScript青少年简明教程：函数及其相关知识（上）

JavaScript青少年简明教程&#xff1a;函数及其相关知识&#xff08;上&#xff09; 在JavaScript中&#xff0c;函数是一段可以重复使用的代码块&#xff0c;它执行特定的任务并可能返回结果。 内置函数&#xff08;Built-in Functions&#xff09; 内置函数是编程语言中预先…
阅读更多...
PLC网关：开启工业4.0时代的智能工厂之路

PLC网关：开启工业4.0时代的智能工厂之路

PLC即可编程逻辑控制器&#xff0c;是工业自动化领域的核心设备&#xff0c;广泛应用于各个工业领域。从PLC问世至今&#xff0c;一直表现出强大的生命力和高速增长态势&#xff0c;2020年全球PLC市场的销售量已经达到了百亿RMB级别。 随着行业智能化、数字化推广&#xff0c;…
阅读更多...
【Vulnhub系列】Vulnhub_Seattle_003靶场渗透（原创）

【Vulnhub系列】Vulnhub_Seattle_003靶场渗透（原创）

【Vulnhub系列靶场】Vulnhub_Seattle_003靶场渗透 原文转载已经过授权 原文链接&#xff1a;Lusen的小窝 - 学无止尽&#xff0c;不进则退 (lusensec.github.io) 一、环境准备 1、从百度网盘下载对应靶机的.ova镜像 2、在VM中选择【打开】该.ova 3、选择存储路径&#xff0…
阅读更多...
Nginx系列-12 Nginx使用Lua脚本进行JWT校验

Nginx系列-12 Nginx使用Lua脚本进行JWT校验

背景 本文介绍Nginx中Lua模块使用方式&#xff0c;并结合案例进行介绍。案例介绍通过lua脚本提取HTTP请求头中的token字段&#xff0c;经过JWT校验并提取id和name信息&#xff0c;设置到http请求头中发向后段服务器。 默认情况下&#xff0c;Nginx自身不携带lua模块&#xff0…
阅读更多...
什么是海外云手机？海外云手机有什么用？

什么是海外云手机？海外云手机有什么用？

在跨境电商的浪潮中&#xff0c;如何高效引流成为了卖家们关注的焦点。近期&#xff0c;越来越多的卖家开始借助海外云手机&#xff0c;通过TikTok平台吸引流量&#xff0c;从而推动商品的海外销售。那么&#xff0c;究竟什么是海外云手机&#xff1f;海外云手机又能为跨境电商…
阅读更多...
商家转账到零钱保姆级申请教程

商家转账到零钱保姆级申请教程

大多数商家在申请微信支付的“商家转账到零钱”过程中都免不了遇到问题&#xff0c;更有不少商家因为屡次驳回严重耽误项目工期。为了帮助商户顺利开通该接口&#xff0c;根据我们上万次成功开通的经验整理这篇攻略以供参考&#xff1a; 一、前期准备 1. 确认主体资格&#xf…
阅读更多...
跨境电商独立站术语盘点（一）独立站建站篇

跨境电商独立站术语盘点（一）独立站建站篇

跨境新手总是被一些跨境专业术语弄得头晕脑胀&#xff0c;不懂得查&#xff0c;查了又忘&#xff0c;忘了又得继续查…… 本期【跨境干货】&#xff0c;笔者特地为大家整理汇总了跨境电商独立站常用网站建站方面的专业术语&#xff0c;帮助你了解建站相关知识&#xff01;赶紧收…
阅读更多...
安装python插件命令集合

安装python插件命令集合

安装python插件pyecharts库 pip install pyecharts -i https://pypi.tuna.tsinghua.edu.cn/simple 安装python插件pandas库 pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple PyCharm 中安装步骤&#xff1a;
阅读更多...
数据结构之队列详解

数据结构之队列详解

1.队列的概念以及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFo(Frist in Frist out)的特性 入队列&#xff1a;进行插入才操作的一端称为队尾 出队列&#xff1a;进行删除操作的一…
阅读更多...
1比25万基础电子地图（广西版）

1比25万基础电子地图（广西版）

我们为你分享过四川、云南、江西、贵州、重庆、青海、西藏、新疆、甘肃、黑龙江、吉林、湖北、广东和内蒙古的1比25万基础电子地图&#xff0c;现在再为你分享广西版的电子地图。 如果你需要这些省份的1比25万基础电子地图&#xff0c;请在文末查看该数据的领取方法。 1比25万…
阅读更多...
flutter开发实战-go_router使用

flutter开发实战-go_router使用

flutter开发实战-go_router使用 一、go_router介绍与特性 go_router是一个Flutter的第三方声明式路由插件&#xff0c;使用路由器API提供一个方便的、基于url的API&#xff0c;用于在不同屏幕之间导航。可以定义URL模式、使用URL导航、处理深度链接以及许多其他与导航相关的场…
阅读更多...
【Spring Boot】Spring 的安全框架：Spring Security

【Spring Boot】Spring 的安全框架：Spring Security

Spring 的安全框架&#xff1a;Spring Security 1.Spring Security 初识1.1 核心概念1.2 认证和授权1.2.1 验证&#xff08;authentication&#xff09;1.2.2 授权&#xff08;authorization&#xff09; 1.3 模块 2.核心类2.1 Securitycontext2.2 SecurityContextHolder2.2.1 …
阅读更多...
Python字符串处理技巧：一个小技巧竟然能省下你一半时间！

Python字符串处理技巧：一个小技巧竟然能省下你一半时间！

获取Pyhon及副业知识&#xff0c;关注公众号【软件测试圈】 效率翻倍的秘密&#xff1a;Python字符串操作的5个惊人技巧 在Python编程中&#xff0c;字符串处理在数据分析、Web开发、自动化脚本等多个领域都有广泛应用。Python提供了一系列强大的字符串处理函数&#xff0c;能够…
阅读更多...
前端工程化11-webpack常见插件

前端工程化11-webpack常见插件

1、webpack的插件Plugin 刚才我们也讲解了下&#xff0c;我们对webpack路径的一个处理&#xff0c;处理的话包括别名的配置&#xff0c;模块是如何找到并加载的&#xff0c;总的来说到现在webpack这个配置到现在来说还是相当的麻烦的&#xff0c;但是目前来说我们讲的这些东西…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023