tsx语法

安装JSX库

安装完之后在vite.config.ts进行插件使用,代码如下:
在这里插入图片描述

在这里插入图片描述

然后就可以愉快的使用TSX来开发Vue组件了,下面主要说一下SFC和TSX的部分区别。

基本语法对照

defineComponent 和 setup
setup中函数的返回值有多种方式,可以直接返回html,这个适合结构简单的页面,如果返回比较多,可以使用如下方式:
在这里插入图片描述

如果是多节点,可以使用空符号包裹
在这里插入图片描述

这种方式类似v-if,但是和v-if还是有点区别,v-if可以作用在更小的范围,而这种方式只适合整个组件的条件渲染,这个可能不好理解,在下面v-if的使用中我们会看到区别。

v-if
使用条件判断语句来实现v-if的功能,一般是三目运算符
在这里插入图片描述

在这里你可以看到v-if的使用和我们上面的条件返回不一样,区别就是整体渲染没有大的变化,只是其中部分地方要按条件显示。

v-bind
绑定变量,也就是简写的:冒号,修改方式就是将冒号去掉,把双引号改为大括号
在这里插入图片描述

v-for
采用map循环的方式,返回一个数组
在这里插入图片描述

自定义指令
自定义指令和普通指令v-model一样
在这里插入图片描述

插槽
插槽有两种实现方式,一种是用v-slots绑定对象,一种是直接在元素中使用对象。
在这里插入图片描述

props
父组件向子组件传值
在这里插入图片描述

需要注意的是,prop传递过来的值如果没有默认值,需要判断是否为空,可以使用计算属性或者条件渲染处理。

emit
子组件向父组件传值
在这里插入图片描述

事件监听
事件监听就是v-on或者@,在TSX中事件以on开头,即使我们的自定义事件没有on,也要在监听的时候加上,一般都采用的是小驼峰的方式。自定义事件也需要在事件名前面加上on即可,参数传递与上面一致
在这里插入图片描述

在TSX中处理事件不能使用事件修饰符,因此需要在事件函数中自行处理,例如冒泡、阻止默认行为等。

属性/事件继承
对于这个我也不知道怎么描述,当我们给一个组件传递属性和事件时,一般子组件在props中接收属性值,emits中接收事件,但是我们也可以传一些额外的属性和事件,即不在props和emits中的属性和事件,虽然这是不推荐的做法,但是有时候当我们封装第三方库的时候,这种用法就非常的方便。具体看如下代码:
在这里插入图片描述

组件引用
通过ref获取组件dom信息
在这里插入图片描述

对外暴露属性和方法
在父组件中直接调用子组件的属性和方法
在这里插入图片描述

规定css类名的命名规则为小驼峰,即child-item类在js中会变成childItem变量。但是要实现css module的功能,对css文件命名由要求,必须在后缀名前面是module,例如xxx.module.css、xxx.module.less、xxx.module.scss。

示例如下:

创建一个css文件:child.module.css
在这里插入图片描述

在这里插入图片描述

除了动态class还有动态style的使用
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

vuepress-----9、PWA

# 9、PWA 使用babel 的插件形式 [vuepress/pwa,{serviceWorker: true,updatePopup: {message: "New content is available.",buttonText: "Refresh"}}]提供 Manifest 和 icons (opens new window) 拷贝到public目录下 发布后出现 service workers [外链图片…

Apache Flink(二):数据架构演变

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹…

promis.all的异步使用

基础 参考 https://blog.csdn.net/qq_52855464/article/details/125376557 简单来说 Promise.all是处理接口返回方法异步的,能够使得接口的获取顺序得到控制,不会出现数据为空的情况 使用 先执行jianshigetGroups->groupIds-> const promises2 …

docker搭建rabbit集群

1.去rabbitMQ官网拉去images 我当前使用的是最新版本的镜像:rabbitmq:3.12-management 2.创建一个集群专用网络 docker的容器相互隔离是不可通信的,我们自行创建一个网络后,创建容器时 给他们放在一起,就可以通信了。 docker netw…

【LabVIEW学习】3.labview制作安装程序

一。生成exe文件 1.创建可执行文件 (1)创建项目 注意: 1.创建.exe文件,这个文件在labview环境下才可以运行,如果直接传递给其他电脑(没有labview环境),他是不可以运行的。 2.如果已…

创建SpringBoot流程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么?二、操作步骤总结 前言 我使用的是jdk1.8版本的,idea社区版的(专业版的应该也差不多吧) 提示…

华清远见嵌入式学习——C++——作业2

作业要求&#xff1a; 代码&#xff1a; #include <iostream>using namespace std;class Rect { private:int width;int height;public:void init(int w,int h);void set_w(int w);void set_h(int h);void show(); };void Rect::init(int w,int h) {width w;height h;…

记一次:Python的学习笔记一

前言&#xff1a;之前学习的Python笔记&#xff0c;已经过去很多年了&#xff0c;不久前重新翻了出来练习练习。不完善的地方在缝缝补补 一、环境搭建 1.1、Python的win环境安装 0、python-3.12.0软件安装&#xff1a;Win11环境搭建python-3.12.0-amd64 这里小小注意一下&a…

vuepress-----3、导航栏

3、导航栏 # 页面目录结构约定 . ├── docs │ ├── .vuepress (可选的) │ │ ├── components (可选的) │ │ ├── theme (可选的) │ │ │ └── Layout.vue │ │ ├── public (可选的) │ │ ├── styles (可选的) │ │ │…

身份证mod11-2校验规则

这几天碰到一个需求是实现身份证最后一位的校验&#xff0c;需求文档里面写了个公式&#xff0c;没看懂&#xff08;数学早就还给老师了&#xff09;&#xff0c;于是各种查资料&#xff0c;发现网上的资料要么只给了说明&#xff0c;要么给了个固定的代码&#xff0c;但是写的…

怎样将Halcon导出的数据显示在textBox中

其中textBox1是文本框的名字&#xff0c;hv_Row时一个数组&#xff0c;.D.我的理解是DATA,即数据的意思&#xff0c;“0.00”是显示的数值保留两位小数点的意思。

数据库系统概述之数据库优化

为什么需要进行优化&#xff1f; 数据库性能瓶颈 数据库服务器的性能受许多因素影响&#xff0c;包括硬件能力、系统规模、业务模型及架构、代码设计、数据库表设计、系统环境等。 因此&#xff0c;可以从几个方面进行数据库优化 喜欢点赞收藏&#xff0c;如有疑问&#xff…

RabbitMQ快速学习之WorkQueues模型、三种交换机、消息转换器(基于SpringBoot)

文章目录 前言一、WorkQueues模型消息发送消息接收能者多劳 二、交换机类型1.Fanout交换机消息发送消息接收 2.Direct交换机消息接收消息发送 3.Topic交换机消息发送消息接收 三、编程式声明队列和交换机fanout示例direct示例基于注解 四、消息转换器总结 前言 WorkQueues模型…

关键词挖掘软件-免费批量挖掘关键词的工具

在当今数字化时代&#xff0c;网站的曝光和排名对于吸引流量至关重要。而在这个大数据的背后&#xff0c;SEO&#xff08;Search Engine Optimization&#xff0c;搜索引擎优化&#xff09;成为许多网站主和创作者们追逐的关键。在SEO的世界里&#xff0c;关键词的选择和优化是…

spring security 艰苦学习中

一、初次感知 1.jwt工具类 密钥secret 有点意思。 2.PasswordEncoder 对密码进行加密&#xff0c;在配置类中返回bean. 下面这个关于加密和解密的东西是有误导性的。

用customize-cra+react-app-rewired配置less+css module

1. 安装 npm i less less-loader -D npm i customize-cra-less-loader -D2.添加配置项 //config-overrides.js const { override } require(customize-cra); const addLessLoader require("customize-cra-less-loader");module.exports {webpack: override(addL…

锚索测力计与振弦采集仪组成桥梁安全监测

锚索测力计与振弦采集仪组成桥梁安全监测 在桥梁工程中&#xff0c;安全监测一直是一个重要的方面。桥梁安全监测可以及时发现桥梁的变形、裂缝、位移等问题&#xff0c;为及时修复或维修提供重要的依据。而锚索测力计和振弦采集仪作为桥梁安全监测的两个主要工具&#xff0c;…

内衣洗衣机和手洗哪个干净?内衣洗衣机便宜好用的牌子推荐

单纯的用手清洗内衣&#xff0c;是很难的清洁到内衣物上的每一个角落的污渍。另外&#xff0c;手洗时所用的水以及香皂并不能彻底杀死衣物上的细菌&#xff0c;反而会在内衣物上滋生细菌。长时间穿这种内衣&#xff0c;对身体有潜在的危害。相比较而言&#xff0c;专用的内衣洗…

Flutter加固原理及加密处理

​ 引言 为了保护Flutter应用免受潜在的漏洞和攻击威胁&#xff0c;加固是必不可少的措施之一。Flutter加固原理主要包括代码混淆、数据加密、安全存储、反调试与反分析、动态加载和安全通信等多个方面。通过综合运用这些措施&#xff0c;可以提高Flutter应用的安全性&#xf…

LeetCode(36)旋转图像【矩阵】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 48. 旋转图像 1.题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在** 原地** 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 …