前言我们平时写vue组件的时候，一般都会用到模板。这种方式看起来比较简单，vue的作者也推荐使用这种方式，但是这种方式也有一些缺点，比如模板调试比较麻烦，或者在某些场景下模板描述可能不是那么简单方便。接下来我们就来说说如何在Vue中编写jsx。懂react的应该都懂jsx。jsx的一个特点就是非常灵活。青菜各有喜好，适合自己和团队的才是最好的。在使用jsx之前，我们需要安装一个babel插件（babel-plugin-transform-vue-jsx）安装方法：npminstall\babel-plugin-syntax-jsx\babel-plugin-transform-vue-jsx\babel-helper-vue-jsx-merge-props\babel-preset-es2015\--save-dev然后在.babelrc中添加：{"presets":["es2015"],"plugins":["transform-vue-jsx"]}那么我们就可以愉快的在vue中写jsx了。Test.vue可以看到我们在render方法中写了jsx，只有vue2.0才支持。用于提供对虚拟DOM的支持，也就是说只有vue2.0支持jsx语法转换。这里需要注意一点，在vue中写jsx的语法和在react中写jsx的语法还是有一点区别的。这是一段涵盖大部分语法的vuejsx代码：render(h){return(
)}可以看到DOM属性需要加上domProps前缀，但是这里lass和style不是必须的，因为这两个是特殊的模块，react的类使用className，而vue的类。事件监听以“on”或“nativeOn”开头。实际上vue2.0的template***会被编译到render方法中，所以template声明的组件和jsx声明的组件是一样的。上面的jsx***会编译成如下：render(h){returnh('div',{//Componentpropsprops:{msg:'hi'},//normalHTMLAttributesattrs:{id:'foo'},//DOMpropsdomProps:{innerHTML:'bar'},//Eventhandlersareenedunder"on",though//modifierssuchasinv-on:keyup.enterarenot//supported.Youllhavetomanuallycheckthe//keyCodeinthehandlerinstead.on:{click:this.clickHandler},//Forcomponentsonly.Allowsyoutolistento//nativeevents，而不是从//thecomponentusingvm.$emit.nativeOn:{click:this.nativeClickHandler},//classisaspecialmodule,sameAPIas`v-bind:class`class:{foo:true,bar:false},//styleisalsosameas`v-bind:style`style:{color:'red',fontSize:'14px'},//otherspecialtop-levelpropertieskey:'key',ref:'ref',//assignthe`ref`isusedonelements/componentswithv-forrefInFor:true,slot:'slot'})}这也意味着两种形式的组件可以相互引用。有时候我们难免会把jsx写的vue组件引入模板或者模板组件引入jsx写的vue组件。这里有一些需要注意的地方：1.在模板中引入jsx组件，可以被组件引用。另外props的写法由驼峰式改为连接器：