摘要：JSX 是一种 Javascript 的语法扩大，JSX = Javascript + XML，即在 Javascript 外面写 XML，因为 JSX 的这个个性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。
本文分享自华为云社区《在 Vue 中如何应用 JSX，就这么简略！【倡议珍藏】》，作者：纸飞机 。
JSX是什么
JSX 是一种 Javascript 的语法扩大，JSX = Javascript + XML，即在 Javascript 外面写 XML，因为 JSX 的这个个性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（集体倡议灵便度强的局部组件能够用JSX来代替，整个我的项目JSX属实没必要）
XML学习地址（学与不学可随便，理解就ok）：https://www.w3school.com.cn/x...
用template的弊病：https://www.mk2048.com/blog/b...
为什么要在 Vue 中应用 JSX
有时候，咱们应用渲染函数（render function）来形象组件，渲染函数不是很分明的参见官网文档, 而渲染函数有时候写起来是十分苦楚的，所以只须要有个理解。
渲染函数：https://cn.vuejs.org/v2/guide...
createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ])其对应的模板是上面：
<anchored-heading :level="1"> <span>Hello</span> world!</anchored-heading>你看这写起来多吃力，这个时候就派上 JSX 上场了。在 Vue 中应用 JSX，须要应用 Babel 插件，它能够让咱们回到更靠近于模板的语法上，接下来就让咱们一起开始在 Vue 中写 JSX 吧。
创立我的项目并配置Babel
`vue create vue-jsx
抉择vue2的`
装置依赖：
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props# oryarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props配置 .babelrc(babel.config.js) ：
module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx', { 'injectH': false }] ]}配置后咱们启动我的项目：
yarn serve
demo结构图：
配置了babel.config.js后，咱们把App.vue引入的HelloWorld.vue改为HelloWorld.js，并且删除HelloWorld.js中对于template和style,以及script标签。
export default { name: 'HelloWorld', props: { msg: String }}JSX根底用法
这里展现在 Vue 中书写一些根底内容。
纯文本、动静内容、标签应用、自定义组件、款式和class
import myComponent from './myComponent'import './HelloWorld.css'// 创立一个组件buttonconst ButtonCounter = { name: "button-counter", props: ["count"], methods: { onClick() { this.$emit("change", this.count + 1); } }, render() { return ( <button onClick={this.onClick}>数量 {this.count}+</button> ); }};export default { name: 'HelloWorld', components: { myComponent }, data () { return { text:'hello 纸没了飞机', inputText:'我吃了', count: 0 } }, props: { msg: String }, watch: {}, methods: { onChange(val) { this.count = val; alert(this.count) } }, render() { // const {text,inputText,count} = this //通过解构，下方return片段中就不须要this return ( <div> <h3>内容</h3> {/* 纯文本 */} <p>hello, I am Gopal</p> {/* 动静内容 */} <p>{ this.text }</p> <p>hello { this.msg }</p> {/* 输入框 */} <input/> {/* 自定义组件 */} <myComponent/> <ButtonCounter style={{ marginTop: "10px" }} count={this.count} type="button" onChange={this.onChange} /> </div> ); }}题外话：创立组件那里大家能够多学学const 创立的ButtonCounter组件的那种形式。在React中也是常常会这么创立的。
这么看的话和在template里写没有多大区别，标签该是啥还是啥没有变动。那么这么一想的话，style呢，class呢？接下来就是style和class款式的写法(包含动静款式)
咱们先给h3绑定一个class为colorRed：
<h3 class="colorRed">内容</h3>
审查元素发现间接写class绑定是能够的：
那么class的款式怎么写呢？毕竟js文件里写<style></style>貌似是不行的！
1、全局款式
App.vue<style>.colorRed{ color: red;}</style>2、引入一个css文件或者配合style-loader引入一个less、sass、stylus文件
留神：都须要装置配置对应的loader，既然都是JSX了，那咱们用stylus来解说下，置信less、sass大家都会了。stylus是一个省略了{}，靠缩紧来辨认的css编译器。（不想用stylus可跳过，款式这块可随便）
yarn add global stylusyarn add --dev stylus stylus-loader各种style装置见：https://www.cnblogs.com/jimc/...
装置实现后新建HelloWorld.styl，而后引入。
stylus的应用：https://www.jianshu.com/p/5fb...
stylus官网：https://stylus.zcopy.site/
控制台stylus报错见：https://blog.csdn.net/csdn_zh...
vscode编辑期报错：装置编辑器stylus语法插件，并重启
成果：
行内款式style：
<p style="color:blue">hello, I am Gopal</p>动静绑定class和style
<p style={this.isGreen?'color:green':''}>{ this.text }</p><p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p><p style={this.isRed?colorRed:''}>红色的文字</p>属性绑定和一般HTML一样的
毕竟class和style可都是html的属性，这点置信大家都晓得的。
<input placeholder="我是placeholder" /><input placeholder={placeholderText} />{/* 解构N个属性，要啥放啥 */}<div {...attrObj} />成果：
罕用指令
template罕用指令：v-html | v-text、v-if、v-for、v-modal等。template的指令在JSX是无奈应用的，故须要一些写法，请看上面。
我新建个instructions.js用来示范指令这块。在App.vue中引入。
v-html | v-text
在 JSX 外面，如果要设置 dom 元素的 innerHTML，就用到 domProps。
render() { const { htmlCode } = this return ( <div> <div domPropsInnerHTML={htmlCode}></div> </div> ); }尽管v-text有domPropsInnerText，但没有用的必要。
v-if
分简略的和简单的。
简略：
render() { let bool = false return ( <div> { bool ? <button>按钮1</button> : <button>按钮2</button>} </div> ); }简单：
render() { let num = 3 if(num === 1){ return( <button>按钮1</button> ) } if(num === 2){ return( <button>按钮2</button> ) } if(num === 3){ return( <button>按钮3</button> ) }}v-for
就应用 map 办法来实现，在react中也是如此。
render(h) { var list = [1,2,3] return( <div> { list.map(item => <button>按钮{item}</button>) } </div> )}v-modal
留神：新版 vue-cli4 中，曾经默认集成了 JSX 语法对 v-model 的反对，能够间接应用
<input v-model={this.value}>
如果你的我的项目比拟老，也能够装置插件 babel-plugin-jsx-v-model 来进行反对
我可是cli4，我来验证下：
验证后果：（通过）
当然以上两种形式你都不想搞，你也能够手动反对，这就波及到监听事件了，请向下看。
监听事件及事件修饰符
监听事件想到用 onChange, onClick等。
须要留神的是，传参数不能应用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会主动执行一次办法
应该应用 bind，或者箭头函数来传参
methods: { handleClick(val){ alert(val) } },<button type="button" onClick={this.handleClick.bind(this, 11)}>点击bind</button><button type="button" onClick={() => this.handleClick(11)}>点击箭头函数</button>下面提到的用过监听事件来实现v-modal
<input type="text" value={this.text} onInput={this.input}/>methods: { input(e){ this.text = e.target.value } },除此之外，还能够应用对象的形式去监听事件：
render() { return ( <input value={this.content} on={{ focus: this.$_handleFocus, input: this.$_handleInput }} nativeOn={{ click: this.$_handleClick }} ></input> )}其余事件的应用同理都是加on。
事件修饰符
和指令一样，除了个别的之外，大部分的事件修饰符都无奈在JSX中应用，这时候你必定曾经习惯了，必定有代替计划的。
.stop ： 阻止事件冒泡，在JSX中应用event.stopPropagation()来代替
.prevent：阻止默认行为，在JSX中应用event.preventDefault() 来代替
.self：只当事件是从侦听器绑定的元素自身触发时才触发回调，应用上面的条件判断进行代替
if (event.target !== event.currentTarget){ return}.enter与keyCode: 在特定键触发时才触发回调
`if(event.keyCode === 13) {
// 执行逻辑
}`
除了下面这些修饰符之外，尤大大为了关照咱们这群CV仔，还是做了一点优化的,对于.once,.capture,.passive,.capture.once，尤大大提供了前缀语法帮忙咱们简化代码
render() { return ( <div on={{ // 相当于 :click.capture '!click': this.$_handleClick, // 相当于 :input.once '~input': this.$_handleInput, // 相当于 :mousedown.passive '&mousedown': this.$_handleMouseDown, // 相当于 :mouseup.capture.once '~!mouseup': this.$_handleMouseUp }} ></div> ) }如果有参数传递给办法，不能间接(参数)，会在页面中立刻触发，须要我在上面这种写法：
clickOnce(val) { alert(val);},<button type="button" on={{ '~click': ()=>this.clickOnce('只能点一次'), }} > 事件修饰符点击一次</button>应用范畴（联合第三方ui组件）
不仅仅在 render 函数外面应用 JSX，而且还能够在 methods 外面返回 JSX，而后在 render 函数外面调用这个办法。并且也能够间接应用例如elementui等ui组件。
JSX 还能够间接赋值给变量、例如应用elementui的el-dialog。（您在测试该案例时记得装置elemnt）
methods: { $_renderFooter() { return ( <div> <el-button>确定</el-button> <el-button onClick={ () =>this.closeDialog() }>勾销</el-button> </div> ); }, openDialog(){ this.visible = true }, closeDialog(){ this.visible = false } },render() { const buttons = this.$_renderFooter(); return ( <div> <Button onClick={ () =>this.openDialog() }>关上Dialog</Button> <el-dialog visible={this.visible}> <div>弹窗内容</div> <template slot="footer">{buttons}</template> </el-dialog> </div> ); }插槽
插槽就是子组件中提供给父组件应用的一个占位符，插槽分为默认插槽，具名插槽和作用域插槽，上面我顺次为您带来每种在JSX中的用法与如何去定义插槽。
默认插槽
应用默认插槽
应用element-ui的Dialog时，弹框内容就应用了默认插槽，在JSX中应用默认插槽的用法与一般插槽的用法根本是统一的，如下代码所示：
render() { return ( <ElDialog title="弹框题目" visible={true}> {/*这里就是默认插槽*/} <div>这里是弹框内容</div> </ElDialog> ) }自定义默认插槽
在Vue的实例this下面有一个属性slots,这个下面就挂载了一个这个组件外部的所有插槽，应用this.slots,这个下面就挂载了一个这个组件外部的所有插槽，应用this.slots.default就能够将默认插槽退出到组件外部。
export default { props: { visible: { type: Boolean, default: false } }, render() { return ( <div class="custom-dialog" vShow={this.visible}> {/**通过this.$slots.default定义默认插槽*/} {this.$slots.default} </div> ) }}应用：
<myComponent visible={true} slot>我是自定义默认插槽</myComponent>另vShow相当于 v-show，不代表别的也能够这样！
具名插槽
应用具名插槽
有时候咱们一个组件须要多个插槽，这时候就须要为每一个插槽起一个名字，比方element-ui的弹框能够定义底部按钮区的内容，就是用了名字为footer的插槽。
render() { return ( <ElDialog title="弹框题目" visible={true}> <div>这里是弹框内容</div> {/** 具名插槽 */} <template slot="footer"> <ElButton>确定</ElButton> <ElButton>勾销</ElButton> </template> </ElDialog> ) }自定义具名插槽
在上节自定义默认插槽时提到了slots，对于默认插槽应用this.slots，对于默认插槽应用this.slots.default，而对于具名插槽，能够应用this.$slots.footer进行自定义。
render() { return ( <div class="custom-dialog" vShow={this.visible}> {this.$slots.default} {/**自定义具名插槽*/} <div class="custom-dialog__foolter">{this.$slots.footer}</div> </div> ) }应用：
<myComponent visible={true}> <template slot="footer"> <ElButton>确定</ElButton> <ElButton>勾销</ElButton> </template></myComponent>作用域插槽
应用作用域插槽
有时让插槽内容可能拜访子组件中才有的数据是很有用的，这时候就须要用到作用域插槽,在JSX中，因为没有v-slot指令，所以作用域插槽的应用形式就与模板代码外面的形式有所不同了。比方在element-ui中，咱们应用el-table的时候能够自定义表格单元格的内容，这时候就须要用到作用域插槽。
<myComponent1 visible={this.visible} {...{ scopedSlots: { test: ({ user }) => { // 这个user就是子组件传递来的数据，同理可这样拿到el-table的row，不过test得是default，不过案例还是我这样 <div style="color:blue;">快来啊，{user.name}，看看这个作用域插槽</div> }, }, }}></myComponent1>自定义作用域插槽
子组件中通过 {this.$scopedSlots.test({ user: {name:‘纸飞机’}})} 指定插槽的名称是 test，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的地位是 test，并在回调函数获取到子组件传入的 user 值
留神：作用域插槽是写在子组件标签中的，相似属性。而不是像具名插槽放在标签外部
新建个作用域插槽.js
// 一个为jsx的子组件(玩玩插槽)export default { name: "myComponent", data() { return { }; }, props: { visible: { type: Boolean, default: false, }, listData: { type: Array, default: function() { return []; }, }, }, render() { return ( <div vShow={this.visible}> {/**自定义作用域插槽*/} <div class="item"> {this.$scopedSlots.test({ user: {name:'纸飞机'} })} </div> </div> ); }, };成果：
函数式组件
函数式组件是一个无状态、无实例的组件，详见官网阐明，新建一个 FunctionalComponent.js 文件，内容如下：
// export default ({ props }) => <p>hello {props.message}</p>;// 或者举荐下方写法export default { functional: true, name: "item", render(h, context) { console.log(context.props) return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>; },};HelloWorld.js中应用：
<funComponent message="展现下函数式组件"></funComponent>成果：
代码地址
https://codechina.csdn.net/qq...
后记
无论你是要用vue2的jsx还是vue3的jsx都没有本质区别，毕竟vue3是向下兼容vue2的；假使你真的要学vue3的JSX，我倡议你学完vue2的再去学；另我不举荐在vue中所有的组件和页面都用JSX，两者须要权衡利弊；同时也不用放心JSX和template的互相嵌套，两者是能够相互嵌套的。
参考：
https://www.cnblogs.com/ainyi...
https://www.jb51.net/article/...
https://cn.vuejs.org/v2/guide...事件-amp-按键修饰符
https://www.cnblogs.com/htooo...
https://www.jianshu.com/p/84b...
https://cloud.tencent.com/dev...
点击关注，第一工夫理解华为云陈腐技术~