前端Vuer，请收下这个《Vue3中使用JSX简明语法》

时间：2023-03-28 11:56:17 HTML

VueDevUI。所有组件均使用Vue3+JSX语法编写。虽然会Vue3，但是不会JSX怎么办？有了《Vue3中使用JSX简明语法》这本书，别慌！本指南收集了您在编写Vue3项目时可能使用的所有常见JSX语法。1文本插值Vue中的文本插值默认使用双大括号：

在JSX中变为单大括号：constname='VueDevUI'constelement=

Hello,{name}/h1>与Vue模板语法中的文本插值相同，大括号内支持任何有效的JavaScript表达式，如：2+2、user.firstName、formatName(user)等。2条件渲染jsx本身是也是一个条件表达式，不需要使用v-if指令。2.1使用if/elseconstelement=(name)=>{if(name){return

Hello,{name}

}else{return

Hello,Stranger

}}上面的代码等有效：constelement=(name)=>

Hello,{name||'陌生人'}

2.2使用三元运算符constelement=icon?:空;上面的代码等同于：constelement=icon&&;3列表渲染列表渲染可以直接使用JS数组的map方法，不需要使用v-for指令。constdata=[{id:1,title:'General'},{id:2,title:'Navigation'}]constelement=data.map(item=>{return

{item.title}}div>})4标签属性绑定属性绑定也是用花括号括起来的，不需要v-bind命令。consthref='https://devui.design/'constelement=DevUIDesign5class类名绑定可以直接使用JS模板字符串。constelement=

也可以使用数组：constelement=Item

6样式绑定样式绑定需要双花括号。constwidth='100px'constelement=7事件绑定绑定事件也是花括号，注意前面要加on前缀事件名称，比如click事件要写成onClick，mouseenter事件要写成onMouseenter。constconfirm=()=>{//确认提交Confirm如果要带参数，需要用箭头函数包裹起来：constconfirm=(name)=>{//ConfirmSubmit}confirm('devui')}>OK7.1事件修饰符在jsx中为事件添加修饰符需要使用withModifiers方法。import{withModifiers,defineComponent,ref}from'vue'constApp=defineComponent({setup(){constcount=ref(0);constinc=()=>{count.value++;};return()=>({count.value}

);},})注意：Vue模板中的ref变量可以直接解构，jsx中不行，你需要记得加上.value，比如上面的{count.value}。8v-model双向绑定bindingmodelValue这种情况比较简单。JSX写法：SFC写法：绑定自定义名称比如绑定visible，v-model:visible的语法在JSX中不能直接使用，需要传入一个数组[menuShow.value,'visible']，数组的第二个参数为绑定的自定义名称。JSX写法：SFC写法：9slotslotjsx中没有标签，需要双大括号定义一个slot。如果是命名插槽，将默认值更改为命名插槽的名称，例如mySlot，使用ctx.slots.mySlot?.()。slot是从setup的第二个参数ctx中获取的，不需要$前缀。import{defineComponent}from'vue'exportdefaultdefineComponent({setup(props,{slots}){//逻辑return()=>{return9.1ScopedSlotsScopedslots使用scopedslots来实现slots传递参数，以下是具体例子。JSX和SFC中槽的使用比较。JSX写法：{{mySlot:(item)=>(item.open?:),}}也可以传v-使用插槽：(item.open?:)}}>SFC写法：

/d-tree>里面的item是slot的参数，参数是通过ctx.slots.mySlot(item)传递给slot的。或者使用renderSlot方法，第三个参数是要传递给slot的参数：import{renderSlot,useSlots}from'vue'10小结本文是一本小册子，主要介绍在Vue3中使用JSX的语法和实践，包括文本插值、属性绑定、事件绑定、双向绑定、条件渲染、列表渲染、槽等几乎所有的Vue3语法，如果你也在Vue3中编写JSX，本指南可能会提供一点参考。欢迎加入VueDevUI开源项目，一起探索更多Vue3+JSX的玩法！添加DevUI小助手微信：devui-official，加入我们的技术交流群，一起玩开源！https://github.com/DevCloudFE/vue-devui/DevUI：体验让世界更美好！

前端Vuer，请收下这个《Vue3中使用JSX简明语法》

{{msg}}

Hello,{name}

Hello,Stranger

Hello,{name||'陌生人'}