在Vue中使用JSX语法

　　JSX
　　在Vue中使用JSX语法。可以让我们回到更接近模板的语法上。render（）｛return（h1这是一个标题h1）｝插值｛this。value｝指令
　　在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。vtextiamapvhtmliamapvshow
　　jsx支持vshow指令：vif！vif｛truep｝｛true？p：spanspanspan｝vfor｛〔1，2，3〕。map（item（｛item｝））｝vonbuttononClick｛this。handleClick｝点击事件buttonbuttononclick｛this。handleClick｝点击事件button！对应click。nativecmpbuttonnativeOnClick｛this。handleClick｝原生点击事件cmpbutton！传递参数buttononClick｛ethis。handleClick（this。id）｝触发点击事件时，传递参数buttonvbindinputvalue｛this。value｝
　　在JSX中可以直接使用classxx来指定样式类，内联样式可以直接写成stylexxxContentContentContentvmodel
　　有相应的插件支持vmodel，所以可以直接使用：inputtypetextvmodel｛this。value｝vslotmycmp默认插槽具名插槽amycmpvprevcloakvonce
　　以上三个指令，不常用，无替代方案Refxxx
　　当遍历元素或组件时，如：〔1，2，3〕。map（item｛item｝）
　　会发现从〔this。refs。xxx〕（this。refs。xxx〕（this。refs。xxx）中获取的并不是期望的数组值，此时就需要将refInFor属性设置为true了：〔1，2，3〕。map（item｛item｝）自定义指令render（）｛1return（inputvsplice｛｛value：this。value，modifiers：｛number：true｝｝｝）2constdirectives〔｛name：splice，value：this。value，modifiers：｛number：true｝｝〕；return（）过滤器！正常使用过滤器｛｛msgcapitalize｝｝！在jsx中使用过滤器｛this。options。filters（capitalize）（this。msg）｝插槽
　　模板写法：！组件内slotnameheaderslotslotslot！使用时mycmpdefaulttemplatevslot：headerheadertemplatemycmp
　　JSX写法：！组件内｛this。slots。header｝｛this。slots。default｝！使用时mycmpdefaulttemplateslotheaderheadertemplatemycmp
　　作用域插槽：模板写法：！组件内slot：textHelloWorldslot！使用时mycmpvslotslotProps｛｛slotProps。text｝｝mycmp
　　JSX写法：！组件内｛this。scopedSlots。default（｛text：HelloWorld，｝）｝！使用时basedemo｛。。。｛scopedSlots：｛default：propsprops。text｝，｝｝basedemo