vue对比react18

1.模板语法-——>jsx

JSX表达式用{}包裹,vue模板表达式用{{}}包裹,其余一致。

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}或{{}}中

<!--vue-->
<template><div><p>I have a {{ product }}</p><p>{{ product + 's' }}</p><p>{{ isWorking ? 'YES' : 'NO' }}</p><p>{{ product.getSalePrice() }}</p></div>
</template>
<!--react-->
<div><p>I have a { product }</p><p>{ product + 's' }</p><p>{ isWorking ? 'YES' : 'NO' }</p><p>{ product.getSalePrice() }</p>
</div>


2.列表渲染:v-for——>map函数:

vue当中使用v-for进行列表渲染,而react中则使用原生map函数来处理。

<!--vue--><template><ul><li v-for="(item, i) in list" :key="item.id">{{item.text}}</li></ul></template><!--react--><div><ul>{list.map((item, i) => <li key={item.id}>{item.text}</li>)}</ul></div>

 3.基础事件的绑定:v-on——>on+事件名;

vue使用v-on简写@+事件名;react采用on+事件名称={事件处理程序},整体上遵循驼峰命名法

<!-- v-on 的写法 -->
<button v-on:click="handleClick"></button>
<!-- 简写形式 -->
<button @click="handleClick"></button>
//react 语法:on+事件名称={事件处理程序},整体上遵循驼峰命名法
<button onClick={handleClick}></button>

 

4.行内样式写法不同:

//vue 
<div style="width: 100%;height: 25%;padding:0 3%;margin-top: 2%;background-color: #fff;" ><div :style="{width:'12px',height:'12px',marginRight:'4px',background:item.color}"></div>
//react中类似于vue的动态属性样式写法
<div style={{ color: 'red'fontSize:'50px'}}></div>

5.结构中类名写法不同,vue是class="类名",而react是classname="类名"

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

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

相关文章

Java开发面试题分享

目录 1、简述MyISAM和InnoDB的区别 2、简述Hash和B树索引的区别 3、简述MyBatis的实现逻辑 4、#{}和${}的区别 5、简述Mybatis的优缺点 6、当实体类中的属性名和表中的字段名不一样时怎么办&#xff1f; 7、resultType与resultMap的区别 8、如何执行批量插入 9、Mybat…

Unity自己实现的中英文的切换(简单好抄)

关键技术&#xff08;读取文件的方法&#xff0c;Split()分割字符串&#xff09; 1.搭建一个这样的场景&#xff0c;场景中有3个文本&#xff08;用新版的&#xff09;&#xff0c;一个空对象&#xff0c;一个按钮 2.编写翻译文本&#xff08;编写一个txt文本&#xff0c;在文…

腾讯云视频点播配置说明 | Modstart

开通云点播 开通云点播 云点播VOD_音视频点播_直播回看_音视频上传、存储转码AI处理方案-腾讯云 获取腾讯云 SecretId 和 SecretSecret 注册并且登录 腾讯云

14. 【Android教程】文本输入框 EditText

在上一节我们讲到了 TextView&#xff0c;它用来显示一段文本。这一节可以算作成是 TextView 的延续&#xff0c;因为从功能上 EditText 在 TextView 的基础之上多了一个输入的功能&#xff1b;从代码上 EditText 是继承自 TextView 的子类&#xff0c;所以我们可以大胆的理解为…

下载python电子书

下面展示一些 内联代码片。 import requests from lxml import etree from urllib import parse from pprint import pprint from tqdm import tqdm class PythonBook: def init(self): self.url“https://m.jb51.net/books/list476_1.html” self.url_page“https://m.jb51.n…

数字乡村发展新模式:科技创新引领农业现代化与乡村振兴协同发展

随着信息技术的飞速发展&#xff0c;数字乡村已成为新时代农业现代化与乡村振兴协同发展的新模式。科技创新作为推动这一模式的核心动力&#xff0c;正引领着乡村产业结构的优化升级&#xff0c;促进农村经济的全面振兴&#xff0c;让农民在现代化的进程中共享发展成果。 一、科…

transformer上手(1) —— transformer介绍

1 起源与发展 2017 年 Google 在《Attention Is All You Need》中提出了 Transformer 结构用于序列标注&#xff0c;在翻译任务上超过了之前最优秀的循环神经网络模型&#xff1b;与此同时&#xff0c;Fast AI 在《Universal Language Model Fine-tuning for Text Classificat…

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡 SD/MicroSD/TF卡是基于FLASH的一种常见非易失存储单元&#xff0c;由接口协议电路和FLASH构成。市面上由不同尺寸和不同容量的卡&#xff0c;手机领域用的TF卡实际就是MicroSD卡&#xff0c;尺寸比SD卡小&#xff0c;而电路和协…

基于Java SpringBoot+Vue的体育用品库存管理系统

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

力扣739. 每日温度

Problem: 739. 每日温度 文章目录 题目描述思路复杂度Code 题目描述 思路 若本题目使用暴力法则会超时&#xff0c;故而使用单调栈解决&#xff1a; 1.创建结果数组res&#xff0c;和单调栈stack&#xff1b; 2.循环遍历数组temperatures&#xff1a; 2.1.若当stack不为空同时…

【C语言】扫雷【附源码】

一、扫雷游戏规则 尽快找到雷区中的所有不是地雷的格子,而不许踩到地雷。点开的数字是几&#xff0c;则说明该数字旁边的8个位置中有几个雷&#xff0c;如果挖开的是地雷&#xff0c;则会输掉游戏。 二、代码思路&#xff1a; 宏定义&#xff1a; Row 和 Col 定义了棋盘的行数和…

计算机研究生规划

一、计算机研究生技术栈 两条腿走路: 左侧工程实践能力&#xff1a;要掌握python编程语言&#xff0c;它和机器学习、神经网络&#xff08;这两门几乎是必须掌握的技能&#xff09;的学习有很大关系 右侧学术创新能力 二、编程语言能力提升 左边基础&#xff0c;右边教你写…

在ubuntu系统上安装ffmpeg支持rrweb使用rrvideo对视频文件转mp4格式遇到的一些问题及解决办法

在ubuntu系统上安装ffmpeg支持rrweb使用rrvideo对视频文件转mp4格式遇到的一些问题及解决办法 1,ubuntu系统上安装ffmpeg4.4.1稳定版本1,ubuntu系统上安装ffmpeg4.4.1稳定版本 按照ChatGPT3.5来 sudo apt updatesudo apt install build-essential git sudo apt-get instal…

上传应用程序到苹果应用商店的工具和要点

引言 在今天的移动应用市场中&#xff0c;将应用程序上传到苹果应用商店&#xff08;App Store&#xff09;是许多开发者的首要任务之一。然而&#xff0c;不同操作系统下的开发者可能需要使用不同的工具和遵循不同的要求来完成这一任务。本文将介绍在 macOS、Windows 和 Linu…

蓝桥杯算法题:练功

【问题描述】 小明每天都要练功&#xff0c;练功中的重要一项是梅花桩。 小明练功的梅花桩排列成 n 行 m 列&#xff0c;相邻两行的距离为 1&#xff0c;相邻两列的距离也为 1。 小明站在第 1 行第 1 列上&#xff0c;他要走到第 n 行第 m 列上。小明已经练了一段时间&#xff…

OpenHarmony实战:瑞芯微RK3566移植案例(下)

OpenHarmony实战&#xff1a;瑞芯微RK3566移植案例&#xff08;下&#xff09; OpenHarmony实战&#xff1a;瑞芯微RK3566移植案例&#xff08;中&#xff09; WIFI 整改思路及实现流程 整改思路 接下来熟悉HCS文件的格式以及"HDF WIFI”核心驱动框架的代码启动初始化…

大话设计模式——11.桥接模式(Bridge Pattern)

简介 将抽象部分与它的实现部分分离&#xff0c;使它们可以独立变化。 UML图&#xff1a; 应用场景&#xff1a; 系统需要在构建的抽象化角色和具体化角色之间增加更多的灵活性不想使用继承导致系统类的个数急剧增加某个类存在多个变化维度使用继承方式容易出现类的膨胀 示例…

Windows编译运行TensorRT-YOLOv9 (C++)

Windows编译运行yolov9-bytetrack-tensorrt&#xff08;C&#xff09; 1 基础环境2 编译yolov9-bytetrack-tensorrt&#xff08;1&#xff09;下载yolov9-bytetrack-tensorrt源码&#xff08;2&#xff09;修改CMakeLists.txt&#xff08;3&#xff09;CMake编译 3 yolov9模型转…

python+appium调@pytest.mark.parametrize返回missing 1 required positional argument:

出错描述&#xff1a; 1、在做pythonappium自动化测试时&#xff0c;使用装饰器pytest.mark.parametrize&#xff08;“参数”&#xff0c;[值1&#xff0c;值2&#xff0c;值3]&#xff09;&#xff0c;测试脚本执行返回test_xx() missing 1 required positional argument:“…

【数据结构与算法】:归并排序和计数排序

1. 归并排序 归并排序是一种效率仅次于快速排序的排序算法。它有非递归和递归两种实现方式(本文只讲述递归实现&#xff0c;非递归实现以后有专门的文章)。 其实&#xff0c;归并排序也叫外排序。它不仅可以对内存中的数据进行排序&#xff0c;还能对文件里的数据排序。 比如&…