学习Vue3 第二十五章（TSX）
小满Vue3（第二十五章 tsx & vite插件）_哔哩哔哩_bilibili 视频教程
完整版用法 请看 @vue/babel-plugin-jsx - npm
我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格
vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接受
1.安装插件
npm install @vitejs/plugin-vue-jsx -D
vite.config.ts 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx()]
})
2.修改tsconfig.json 配置文件
"jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",
配置完成就可以使用啦
在目录新建一个xxxxxx.tsx文件
3.使用TSX
TIPS tsx不会自动解包使用ref加.vlaue ! ! !
tsx支持 v-model 的使用
import { ref } from 'vue'let v = ref<string>('')const renderDom = () => {return (<><input v-model={v.value} type="text" /><div>{v.value}</div></>)
}export default renderDomv-show
import { ref } from 'vue'let flag = ref(false)const renderDom = () => {return (<><div v-show={flag.value}>景天</div><div v-show={!flag.value}>雪见</div></>)
}export default renderDomv-if是不支持的
所以需要改变风格
import { ref } from 'vue'let flag = ref(false)const renderDom = () => {return (<>{flag.value ? <div>景天</div> : <div>雪见</div>}</>)
}export default renderDomv-for也是不支持的
需要使用Map
import { ref } from 'vue'let arr = [1,2,3,4,5]const renderDom = () => {return (<>{arr.map(v=>{return <div>${v}</div>})}</>)
}export default renderDomv-bind使用
直接赋值就可以
import { ref } from 'vue'let arr = [1, 2, 3, 4, 5]const renderDom = () => {return (<><div data-arr={arr}>1</div></>)
}export default renderDomv-on绑定事件 所有的事件都按照react风格来
- 所有事件有on开头
- 所有事件名称首字母大写
const renderDom = () => {return (<><button onClick={clickTap}>点击</button></>)
}const clickTap = () => {console.log('click');
}export default renderDomProps 接受值
import { ref } from 'vue'type Props = {title:string
}const renderDom = (props:Props) => {return (<><div>{props.title}</div><button onClick={clickTap}>点击</button></>)
}const clickTap = () => {console.log('click');
}export default renderDomEmit派发
type Props = {title: string
}const renderDom = (props: Props,content:any) => {return (<><div>{props.title}</div><button onClick={clickTap.bind(this,content)}>点击</button></>)
}const clickTap = (ctx:any) => {ctx.emit('on-click',1)
}
Slot
const A = (props, { slots }) => (<><h1>{ slots.default ? slots.default() : 'foo' }</h1><h2>{ slots.bar?.() }</h2></>
);const App = {setup() {const slots = {bar: () => <span>B</span>,};return () => (<A v-slots={slots}><div>A</div></A>);},
};// orconst App = {setup() {const slots = {default: () => <div>A</div>,bar: () => <span>B</span>,};return () => <A v-slots={slots} />;},
};// or you can use object slots when `enableObjectSlots` is not false.
const App = {setup() {return () => (<><A>{{default: () => <div>A</div>,bar: () => <span>B</span>,}}</A><B>{() => "foo"}</B></>);},
};加餐实现一个vite插件解析tsx
1.需要用到的第三方插件
npm install @vue/babel-plugin-jsx
npm install @babel/core
npm install @babel/plugin-transform-typescript
npm install @babel/plugin-syntax-import-meta
npm install @types/babel__core插件代码
import type { Plugin } from 'vite'
import * as babel from '@babel/core'; //@babel/core核心功能：将源代码转成目标代码。
import jsx from '@vue/babel-plugin-jsx'; //Vue给babel写的插件支持tsx v-model等
export default function (): Plugin {return {name: "vite-plugin-tsx",config (config) {return {esbuild:{include:/\.ts$/}}},async transform(code, id) {if (/.tsx$/.test(id)) {//@ts-ignoreconst ts = await import('@babel/plugin-transform-typescript').then(r=>r.default)const res = babel.transformSync(code,{plugins:[jsx,[ts, { isTSX: true, allowExtensions: true }]], //添加babel插件ast:true, // ast: 抽象语法树，源代码语法结构的一种抽象表示。babel内部就是通过操纵ast做到语法转换。babelrc:false, //.babelrc.jsonconfigFile:false //默认搜索默认babel.config.json文件})return res?.code //code: 编译后的代码}return code}}
}
学习Vue3 第二十五章（TSX）相关推荐
- WP8.1学习系列(第二十五章)——控件样式
XAML 框架提供许多自定义应用外观的方法.通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visua ...
- 学习Vue3 第二十六章（深入v-model）
小彩蛋Vue3自动引入插件 unplugin-auto-import/vite vite配置 import { defineConfig } from 'vite' import vue from ' ...
- 25 linux ndk 头文件_正点原子Linux第二十五章RTC实时时钟实验
1)资料下载:点击资料即可下载 2)对正点原子Linux感兴趣的同学可以加群讨论:935446741 3)关注正点原子公众号,获取最新资料更新 第二十五章RTC实时时钟实验 实时时钟是很常用的一个外设 ...
- 鸟哥的Linux私房菜(基础篇)- 第二十五章、 Linux 备份策略
第二十五章. Linux备份策略 最近升级日期:2009/09/18 万一不幸你的 Linux 被黑客入侵了.或是你的 Linux 系统由於硬件关系 (不论是天灾还是人祸) 而挂掉了!这个时候,请问如 ...
- 系统集成项目管理工程师（软考中级）—— 第二十五章 法律法规（补充） 笔记分享
前言 最近在复习软考高级,比较少更新.. 现在分享一些笔记给大家,希望能够帮助大家并顺利通过软考. 幕布地址:(补充)第二十五章 法律法规 - 幕布 概述 法规法规部分涉及招投标法.招投标法实施条例. ...
- 【正点原子STM32连载】 第二十五章 TFTLCD（MCU屏）实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
- 【正点原子MP157连载】第二十五章 pinctrl和gpio子系统实验-摘自【正点原子】STM32MP1嵌入式Linux驱动开发指南V1.7
1)实验平台:正点原子STM32MP157开发板 2)购买链接:https://item.taobao.com/item.htm?&id=629270721801 3)全套实验源码+手册+视频 ...
- 【正点原子STM32连载】 第二十五章 TFT-LCD（MCU屏）实验 摘自【正点原子】STM32F103 战舰开发指南V1.2
1)实验平台:正点原子stm32f103战舰开发板V4 2)平台购买地址:https://detail.tmall.com/item.htm?id=609294757420 3)全套实验源码+手册+视 ...
- 第二十五章补充内容 3 assert()宏
//第二十五章补充内容 3 assert()宏 //有的编译器还提供了assert()宏,这个宏在许多书中被翻译为断言,它的作用是当assert()的参数为真时,返回真,假如参数值为假,那么它将执行某 ...
- 第二十五章补充内容 5 不能为0的变量
// 第二十五章补充内容 5 不能为0的变量 /*#define DEBUG #include <iostream> #include <string> using names ...
最新文章
- 访问的属性未定义_V8中的快属性
- python整数池_【Python】Python中神奇的小整数对象池和大整数对象池
- 安防企业转型不断 谁是跨界之王？
- es创建索引库，无法使用InetSocketTransportAddress
- Appium安装使用总结
- Protobuf生成Java代码(Maven)
- 紫书 习题 8-15 UVa 1617 （贪心）
- 利用Postman工具测试若依前后端分离接口
- (二)零基础入门C语言 --- C语言之入门课程
- 请自行检查是否安装VC9运行库？？
- 使用 Transmission 制作种子命令
- 应广单片机开发流程需要注意哪些?
- 小程序 wepy+MinUI
- 使用aws跑深度学习_11. 附录 - 11.4. 使用AWS运行代码 - 《动手学深度学习》 - 书栈网 · BookStack...
- 【web前端期末大作业】基于html+css+javascript+jquery技术设计的音乐网站(44页)
- 谢启鸿老师思考题及解答合集
- android节操播放器回调,节操播放器（简单使用）
- 海尔“灯塔”张瑞敏，一把锤子砸出的硬核人生
- 28岁才转行软件测试，目前32了，我的一些经历跟感受
- 深黑黑板风格感恩节主题介绍PPT模板