在Vue3中优雅使用Jsx-Tsx

时间：2023-03-20 00:16:45 科技观察

前言相信react小伙伴对jsx/tsx并不陌生，现在你也可以在vue3中使用jsx/tsx语法了。安装插件(@vitejs/plugin-vue-jsx)Vite官方提供了一个官方插件，支持在vue3中使用jsx/tsx，直接安装即可。yarnadd@vitejs/plugin-vue-jsx-D安装完成后，在vite.config.ts中插入代码。从“@vitejs/plugin-vue-jsx”导入vueJsx；exportdefaultdefineConfig({plugins:[vueJsx(),]})配置完成后，jsx/tsx就可以在项目中使用了。1、插值jsx/tsx的插值与vue模板语法中的插值相同，支持有效的Javascript表达式，如：a+b,a||5....只是在jsx/tsx中，双大括号{{}}改为单大括号{}。//vue3模板语法{{a+b}}//jsx/tsx{a+b}2.类和样式绑定两种方式，使用模板字符串或者使用阵列。使用模板字符串用空格分隔两个类名。//模板字符串header

//arrayheader

样式绑定需要双括号。constcolor='red'constelement=style3.条件渲染jsx/tsx只保留v-show指令，没有v-if指令。if/else和三元表达式都可以使用。setup(){constisShow=falseconstelement=(){if(isShow){return我是if}else{return我是else}}return()(

我是v-show{element()}{isShow?

我是三木1

我是三木2

}

)}4.列表渲染同样，jsx/tsx中也没有v-for指令。我们只需要使用Js的数组方法map来渲染列表即可。setup(){constlistData=[{name:'Tom',age:18},{name:'Jim',age:20},{name:'Lucy',age:16}]return()(

姓名年龄

{prop.listData.map(item=>{return{item.name}{item.age}

})}

)}5.事件处理和绑定事件也用了单大括号{}，但是事件绑定没有加上@前缀，而是改成了on，比如：点击事件是onClick。如果需要使用事件修饰符，则需要使用withModifiers方法。withModifiers方法接收两个参数。第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符。setup(){constclickBox=val{console.log(val)}return()(clickBox('box1')}>我是box1clickBox('box2')}>我是box2clickBox('box3'),['stop'])}>我是box3