JSX在Vue中的基本用法

时间：2023-03-31 20:21:51 vue.js

基本用法首先需要约定，使用JSX组件命名首字母大写驼峰命名法，较少的样式可以直接写在基于vue-styled-components的同一个文件中，复杂的建议放在单独的_Styles.js_文件中。当然，你可以用Less/Sass代替CSS-IN-JS来写，然后在文件中导入。这是一个通用框架：importstyledfrom'vue-styled-components'constContainer=styled.div`height:100%;`constDashboard={name:'Dashboard',render(){return(content)}}exportdefaultDashboard插值在JSX中使用单括号绑定文本插值Message:{this.messsage}在jsx中，不需要将v-model分为事件绑定和的作业的两部分分开写，因为有相应的babel插件专门处理。在JSX中可以直接使用class="xx"来指定样式类，内联样式可以直接写成style="xxx"按钮

遍历在JSX中没有v-for、v-if等指令，都需要用Js的方式实现{/*类似于v-if*/}{this.withTitle&&}{/*类似于v-ifplusv-else*/}{this.isSubTitle?<SubTitle/>:<Title/>}{/*类似于v-for*/}{this.options.map(option=>{<div>{option.title}</div>})}Eventbinding事件绑定需要在事件名前面加上on前缀，加上nativeOn<el-butononClick={this.handleClick}>点我</el-buton><el-buttonnativeOnClick={this.handleClick}>原生点击</el-button><el-buttononClick={e=>this.handleClick(this.id)}>点击并传递数据</el-button>注意：如果需要给事件处理函数传递参数，需要使用箭头函数来实现.如果你不使用箭头函数，那么receive将是事件对象的事件属性。进阶部分也可以在Vue中基于jsx将组件拆分成小的功能组件，但是有一个限制就是必须有外层包裹元素，不能直接这样写：constDemo=()=>(<li>One</li><li>Two</li>)必须写成：constDemo=()=>(<div><li>One</li><li>Two</li></div>)在React中，可以使用空标签<>/>和<react.Fragment></react.Fragment>来实现包裹元素。这里的空标签其实只是react.Fragment的一个语法糖。同时React16直接支持返回数组的形式：constDemo=()=>[<li>One</li><li>Two</li>]那么在Vue中类似的功能只能是通过遍历Function实现，大致思路是先定义数据，然后直接生成map。当然，如果元素的标签是不同类型的，就需要添加额外的标签来判断。{data(){return{options:['one','two']}},render(){constLiItem=()=>this.options.map(option=><li>{option}</li>)return(<div><ul><LiItem/></ul></div>)}}事件修饰符在基础部分简单介绍了事件的绑定用法，这里主要是补充写法事件修饰符。在模板语法中，Vue提供了很多事件修饰符来快速处理事件冒泡、捕获、事件触发频率、按键识别等。可以直接查看官方文档的事件&按钮修饰符部分，这里原样继承相关内容：修饰符前缀.passive&.capture!.once~.capture.onceor.once.capture~！用法如下：<el-button{...{'!click':this.doThisInCapturingMode,'!keyup':this.doThisOnce,'~!mouseover':this.doThisOnceInCapturingMode}}>点我！</el-button>下面给出的事件修饰符是一个等价的操作，需要在事件处理函数中写stopevent.stopPropagation().preventevent.preventDefault().selfif(event.target!==event.currentTarget)returnkey:.enter,.13if(event.keyCode!==13)return（对于其他键修饰符，可以将13改成其他键码）modifierkey:.ctrl,.alt,.shift,.metaif(!event.ctrlKey)return(changectrlKeytoaltKey,shiftKeyormetaKey)以下是在事件处理程序中使用修饰符的例子：methods:{keyup(e){//对应`.self`if(e.target!==e.currentTarget)return//对应于`.enter`,`.13`if(!e.shiftKey||e.keyCode!==13)return//对应于`.stop`e.stopPropagation()//对应于`.prevent`e.preventDefault()//...}}Vue中的ref和refInForref用于向元素或子组件注册引用信息。引用信息会被注册到父组件的$refs对象上。如果用在普通DOM元素上，则引用指向DOM元素；如果在子组件上使用，则引用指向该组件。注意：因为refs本身是作为渲染的结果创建的，所以您无法在初始渲染时访问它们-它们尚不存在。$refs不是反应性的，所以你不应该尝试将它们用于模板中的数据绑定。当v-for用于元素或组件时，引用信息将是一个包含DOM节点或组件实例的数组。如果想在jsx中引用遍历元素或组件，例如：constLiArray=()=>this.options.map(option=>(<liref="li"key={option}>{option}}/li>))你会发现this.$refs.li得到的数组值不是预期的数组值。这时候需要用到refInFor属性，设置为true，达到在模板中使用refinv-for的效果：constLiArray=()=>this.options.map(option=>(<liref="li"refInFor={true}key={option}>{option}</li>))slot(v-slot)可以在jsx中使用this.$slots来访问静态槽的内容。注意：slot和slot-scope在Vue2.6.x之后被弃用，模板中统一使用新的统一语法v-slot指令。v-slot只能与Vue组件和模板标签一起使用。<divclass="page-header__title">{this.$slots.title?this.$slots.title:this.title}</div>相当于<divclass="page-header__title"><slotofthetemplatename="title">{{title}}</slot></div>Vue官方文档中提到：父模板中的所有内容都在父作用域中编译；子模板中的一切一切都在子范围内编译。所以下面的例子不能正常工作。<current-user>{{user.firstName}}</current-user>可以访问<current-user>组件中的user属性，但是提供的内容是在父组件中渲染的。如果想要达到想要的效果，这时候就需要使用scopedslots。以下是重写后的代码。更多知识点可以直接参考官方文档的scopeslot。<span><slotv-bind:user="user">{{user.lastName}}</slot></span><current-user><templatev-slot:default="slotProps">{{slotProps.user.firstName}}</template></current-user>上面的例子其实就是官方的例子，这里需要注意的是，其实Vue中所谓的scopeslot函数和React中RenderProps的概念是类似的，只是在React中我们更多的时候不仅提供了属性，还提供了操作方法。但是在Vue中，更多的数据是提供给父作用域渲染和显示的。当然我们也可以提供方法，例如：<template><div><slotv-bind:injectedProps="slotProps">{{user.lastName}}</slot></div></template>在父组件中使用：<current-user><templatev-slot:default="{injectedProps}"><div>{{injectedProps.user.firstName}}</div><el-button@click="injectedProps.logFullName">LogFullName</el-button></template></current-user>在上面的代码中，我们其实是通过解构得到了injectedProps，基于解构的特性还可以重命名属性名称，并在prop未定义时指定初始值<current-userv-slot="{user={firstName:'Guest'}}">{{user.firstName}}</current-user>如果组件只有一个默认槽，也可以使用缩写语法，将v-slot:default="slotProps"写成v-slot="slotProps"，将命名槽写成v-slot:user="slotProps"，如果你想要一个动态的槽名，也可以写成v-slot:[dynamicSlotName]。此外，命名槽也有缩写语法。例如，v-slot:header可以改写为#header。上面介绍了很多slot相关的东西。知识点足以说明其在开发过程中的重要性。说了很多关于如何在模板中定义和使用作用域插槽，现在如何在jsx中使用它们？//当前用户组件{data(){return{user:{firstName:'snow',lastName:'wolf'}}},computed:{slotProps(){return{user:this.user,logFullName:this.logFullName}}},方法:{logFullName(){console.log(`${this.firstName}${this.lastName}`)}},render(){return(<div>{this.$scopedSlots.subTitle({injectedProps:this.slotProps})}</div>)}}然后在父组件中使用jsx:<current-user{...{scopedSlots:{subTitle:({injectedProps})=>(<div><h3>injectedProps.user</h3><el-buttononClick={injectedProps.logFullName}>LogFullName</el-button></div>)}}}></current-user>此处需要指令注意除了v-show之外，jsx中的所有Vue内置指令都不支持，需要用一些等价的方式实现，比如v-if使用三元运算表达式，v-for使用array.map()等等，您可以使用v-name={value}的语法来编写自定义命令。需要注意的是，这种方式不支持命令的参数和修饰符。以官方文档指令部??分给出的v-focus例子为例，介绍两种方案：1.直接使用对象传递所有指令属性<inputtype="text"v-focus={{value:true}}/>2使用原始vnode指令数据格式value:true}]return(<div><inputtype="text"{...{directives}}/></div>)}}filter其实在开发过程中filter用的不多，因为它可以更频繁地使用通过计算属性对数据进行一些转换和过滤。这里只是简单提一下，没有可以深究的知识点。模板中的用法如下：{{message|大写}}<divv-bind:id="rawId|formatId"></div>jsx中使用的方法是：<div>{this.$options.filters('formatDate')('2019-07-01')}</div>注意：由于Vue的全局过滤器只在模板中使用。如果需要在组件的方法中使用，可以将filter方法单独从一个publicJs文件中抽取出来，然后引入到组件中，然后在方法中使用。源码附件已经打包上传到百度云，大家可以自行下载~链接：https://pan.baidu.com/s/14G-b...提取码：yu27百度云链接不稳定，随时可能坏掉无效，请抓紧保存。如果百度云链接失效请留言告诉我，我看到后会及时更新~开源地址码云地址：http://github.crmeb.net/u/defuGithub地址：http://github.crmeb。网/你/得福</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="JS中变量提升的数据例子有哪些？" href="/webqianduan/213658.html">JS中变量提升的数据例子有哪些？</a> </div> <div class="prev">下一篇：<a title="精读《DOM diff 原理详解》" href="/webqianduan/213660.html">精读《DOM diff 原理详解》</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>JSX在Vue中的基本用法相关文章</code></div> <ul> <li><a href="/kejifunen/370906.html" target="_blank" title="独家专访Oculus VR创始人！虚拟现实将在哪里爆发？ ">独家专访Oculus VR创始人！虚拟现实将在哪里爆发？ </a></li> <li><a href="/kejifunen/370901.html" target="_blank" title="阿里巴巴联手万豪，推动人脸识别技术在酒店场景的应用">阿里巴巴联手万豪，推动人脸识别技术在酒店场景的应用</a></li> <li><a href="/kejifunen/370884.html" target="_blank" title="智能家居正在经历软故障，售后问题如何保障？ ">智能家居正在经历软故障，售后问题如何保障？ </a></li> <li><a href="/kejifunen/370882.html" target="_blank" title="谷歌眼镜！我在预演未来，你却在谈论生与死">谷歌眼镜！我在预演未来，你却在谈论生与死</a></li> <li><a href="/kejifunen/370877.html" target="_blank" title="健康类产品在小家电市场颇受欢迎，小狗九阳上半年表现亮眼">健康类产品在小家电市场颇受欢迎，小狗九阳上半年表现亮眼</a></li> <li><a href="/kejifunen/370876.html" target="_blank" title="Fitbit利润暴跌可穿戴市场还在复苏吗？ ">Fitbit利润暴跌可穿戴市场还在复苏吗？ </a></li> <li><a href="/kejifunen/370844.html" target="_blank" title="真正的智能T恤在这里">真正的智能T恤在这里</a></li> <li><a href="/kejifunen/370842.html" target="_blank" title="飞利浦43英寸QD量子点显示屏436M6VBPAB现已在中国">飞利浦43英寸QD量子点显示屏436M6VBPAB现已在中国</a></li> <li><a href="/kejifunen/370841.html" target="_blank" title="谈论触觉反馈技术，让你在虚拟现实世界中漫游">谈论触觉反馈技术，让你在虚拟现实世界中漫游</a></li> <li><a href="/kejifunen/370799.html" target="_blank" title="Fitbit新款智能手表Versa已在中国正式上市">Fitbit新款智能手表Versa已在中国正式上市</a></li> <li><a href="/kejifunen/370780.html" target="_blank" title="苹果 Siri 或能识别多个用户，在声纹识别之路上更进一步 ">苹果 Siri 或能识别多个用户，在声纹识别之路上更进一步 </a></li> <li><a href="/kejifunen/370753.html" target="_blank" title="美国专利局：谷歌正在秘密研发3D全息眼镜">美国专利局：谷歌正在秘密研发3D全息眼镜</a></li> <li><a href="/kejifunen/370687.html" target="_blank" title="第三届Microchip Source华东技术交流会在江苏常">第三届Microchip Source华东技术交流会在江苏常</a></li> <li><a href="/kejifunen/370677.html" target="_blank" title="苹果可能会在912期间发布圆形Apple Watch，看过的">苹果可能会在912期间发布圆形Apple Watch，看过的</a></li> <li><a href="/kejifunen/370654.html" target="_blank" title="听说大家一直在抢的其实是这款米家电磁炉">听说大家一直在抢的其实是这款米家电磁炉</a></li> <li><a href="/kejifunen/370647.html" target="_blank" title="用AI连接你的生活！ TOPPERS将在GMIC大会上展示多">用AI连接你的生活！ TOPPERS将在GMIC大会上展示多</a></li> <li><a href="/kejifunen/370609.html" target="_blank" title="VR硬件标准或将在2016年底开始形成">VR硬件标准或将在2016年底开始形成</a></li> <li><a href="/kejifunen/370592.html" target="_blank" title="Apple Watch销量暴跌，智能手表“三明治”效应依然存">Apple Watch销量暴跌，智能手表“三明治”效应依然存</a></li> <li><a href="/kejifunen/370591.html" target="_blank" title="运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔">运动手表、运动相机，智能穿戴的未来在哪里？ tesa全新热熔</a></li> <li><a href="/kejifunen/370567.html" target="_blank" title="网约车服务将在下半年取得成功，美团网约车将稳步发展，做行业建">网约车服务将在下半年取得成功，美团网约车将稳步发展，做行业建</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371274.html" title="这款中国无线智能耳机在海外火爆！ " target="_blank">这款中国无线智能耳机在海外火爆！ </a></li> <li><em>2</em><a href="/kejifunen/371269.html" title="Cool House“全球智能加速器”沙龙将于8月10日在深" target="_blank">Cool House“全球智能加速器”沙龙将于8月10日在深</a></li> <li><em>3</em><a href="/kejifunen/371256.html" title="VR“断断续续”的流行还存在这些问题" target="_blank">VR“断断续续”的流行还存在这些问题</a></li> <li><em>4</em><a href="/kejifunen/371253.html" title="这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝" target="_blank">这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝</a></li> <li><em>5</em><a href="/kejifunen/371221.html" title="CIRP报告！苹果HomePod在美国智能音箱市场排名第三" target="_blank">CIRP报告！苹果HomePod在美国智能音箱市场排名第三</a></li> <li><em>6</em><a href="/kejifunen/371214.html" title="谷歌正在重振眼镜革命" target="_blank">谷歌正在重振眼镜革命</a></li> <li><em>7</em><a href="/kejifunen/371213.html" title="VR设备数量或将在5年内超越智能手机 " target="_blank">VR设备数量或将在5年内超越智能手机 </a></li> <li><em>8</em><a href="/kejifunen/371208.html" title="当虚拟现实和3D技术走进战场，无需军官在场" target="_blank">当虚拟现实和3D技术走进战场，无需军官在场</a></li> <li><em>9</em><a href="/kejifunen/371204.html" title="赛门铁克！黑客入侵可穿戴设备，存在被追踪隐患" target="_blank">赛门铁克！黑客入侵可穿戴设备，存在被追踪隐患</a></li> <li><em>10</em><a href="/kejifunen/371203.html" title="魅族官方微博提示！魅族悬浮音箱Gravity即将在中国上市" target="_blank">魅族官方微博提示！魅族悬浮音箱Gravity即将在中国上市</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/371199.html" title="记住在可穿戴领域！不要学小米式营销" target="_blank">记住在可穿戴领域！不要学小米式营销</a></li> <li><em>2</em><a href="/kejifunen/371198.html" title="助力智慧生活，Formate新品T68即将在天猫、京东开售" target="_blank">助力智慧生活，Formate新品T68即将在天猫、京东开售</a></li> <li><em>3</em><a href="/kejifunen/371188.html" title="科技在召唤！人工智能引发手机行业新一轮革命" target="_blank">科技在召唤！人工智能引发手机行业新一轮革命</a></li> <li><em>4</em><a href="/kejifunen/371183.html" title="领域！在虚拟现实中玩游戏、锻炼身体" target="_blank">领域！在虚拟现实中玩游戏、锻炼身体</a></li> <li><em>5</em><a href="/kejifunen/371171.html" title="高通推出Snapdragon Wear 2500，增加在可穿" target="_blank">高通推出Snapdragon Wear 2500，增加在可穿</a></li> <li><em>6</em><a href="/kejifunen/371139.html" title="让人类长出“鳃”，这款可穿戴设备有望让人类在水下自由呼吸！ " target="_blank">让人类长出“鳃”，这款可穿戴设备有望让人类在水下自由呼吸！ </a></li> <li><em>7</em><a href="/kejifunen/371132.html" title="据传亚马逊正在开发首款智能眼镜！内置 Alexa 语音助手" target="_blank">据传亚马逊正在开发首款智能眼镜！内置 Alexa 语音助手</a></li> <li><em>8</em><a href="/kejifunen/371111.html" title="明星都在玩VR，你为什么不跟上呢？ " target="_blank">明星都在玩VR，你为什么不跟上呢？ </a></li> <li><em>9</em><a href="/kejifunen/371108.html" title="国内首家“虚拟现实内容研发中心”成立，乐视VR与北电在产学研" target="_blank">国内首家“虚拟现实内容研发中心”成立，乐视VR与北电在产学研</a></li> <li><em>10</em><a href="/kejifunen/371098.html" title="可穿戴设备市场将在“大规模灭绝”后重生" target="_blank">可穿戴设备市场将在“大规模灭绝”后重生</a></li> <li><em>11</em><a href="/kejifunen/371087.html" title="激光电视不断升级改进，但现在谈普及还为时过早" target="_blank">激光电视不断升级改进，但现在谈普及还为时过早</a></li> <li><em>12</em><a href="/kejifunen/371086.html" title="苹果正在为明年的智能手表开发低功耗micro-LED面板" target="_blank">苹果正在为明年的智能手表开发低功耗micro-LED面板</a></li> <li><em>13</em><a href="/kejifunen/371078.html" title="高通在可穿戴、无人机、车联网等领域实力强劲" target="_blank">高通在可穿戴、无人机、车联网等领域实力强劲</a></li> <li><em>14</em><a href="/kejifunen/371060.html" title="观看CES2017！可穿戴设备成“剩菜”，智能家居无处不在？" target="_blank">观看CES2017！可穿戴设备成“剩菜”，智能家居无处不在？</a></li> <li><em>15</em><a href="/kejifunen/370986.html" title="智能手表还在关注 Apple Watch 吗？华米智能手表" target="_blank">智能手表还在关注 Apple Watch 吗？华米智能手表</a></li> <li><em>16</em><a href="/kejifunen/370985.html" title="苹果承认Apple Watch 3 LTE版本存在网络连接问" target="_blank">苹果承认Apple Watch 3 LTE版本存在网络连接问</a></li> <li><em>17</em><a href="/kejifunen/370984.html" title="帝国晚期！苹果王朝的继承者在哪里？ " target="_blank">帝国晚期！苹果王朝的继承者在哪里？ </a></li> <li><em>18</em><a href="/kejifunen/370976.html" title="王者归来！昔日巨头能否在可穿戴市场重生？ " target="_blank">王者归来！昔日巨头能否在可穿戴市场重生？ </a></li> <li><em>19</em><a href="/kejifunen/370975.html" title="谁说便宜的东西就不能是好东西？运动追踪市场正在受到入门级产品" target="_blank">谁说便宜的东西就不能是好东西？运动追踪市场正在受到入门级产品</a></li> <li><em>20</em><a href="/kejifunen/370960.html" title="大家都在追捧的VR是不是一个诱人的骗局？ " target="_blank">大家都在追捧的VR是不是一个诱人的骗局？ </a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>