前言

我们平常写 vue 的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且 vue 作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。

下面我们要讲的是如何在 vue 里面写 jsx，知道 react 的人应该都知道 jsx，jsx 的一个特性就是非常灵活，虽然有的人觉得 jsx 很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。

在使用 jsx 之前我们需要安装一个 babel 插件（babel-plugin-transform-vue-jsx）
安装方式：

然后再.babelrc 里面添加：

接着我们就可以愉快地在 vue 里面编写 jsx 了。
Test.vue

可以看到我们把 jsx 写在了 render 方法里面，render 方法是 vue2.0 才支持的，用来提供对虚拟 DOM 的支持，也就是说只有 vue2.0 才支持 jsx 语法转换。

这里要注意的一点是 vue 里面编写 jsx 和在 react 里面的 jsx 语法还是有一点不一样的。
一下是一段覆盖大部分语法的 vue jsx 代码：

可以看到 DOM 属性要加 domProps 前缀，但这里 lass 和 style 却不需要，因为这两个是特殊的模块，而且 react 的 class 用的是 className，vue 却用的 class。事件监听是以 “on” 或者 “nativeOn” 为开始。

实际上 vue2.0 的模版最后都会被编译为 render 方法，所以模版声明的组件和 jsx 声明的组件最后都是一样的。
上面的 jsx 最后会被编译成下面这样：

这也意味着两种形式的组件是可以相互引用的。

有时候我们难免会在模版里引入 jsx 编写的 vue 组件或者在 jsx 编写的 vue 组件里引入模版组件，这里还是有些需要注意的事项：
1. 在模版里面引入 jsx 的组件，可以通过 components 引用，另外 props 的编写从驼峰式改为连接符：

2. 在 jsx 里面引入 vue 模版组件，这里没有什么要注意的，除了连接符式的属性要转换成驼峰式，还有一个需要注意的是指令，如果用了 jsx，那么内置的指令都不会生效（除了 v-show），好在内置指令大部分都可以用 jsx 描述。那么自定义指令要怎么用呢？
自定义指令可以使用 “v-name={value}” 语法，如果要支持指令参数和 modifier 可以用 “v-name={{ value, modifier: true }}” 语法：

我们还可以用原生 vnode 的数据格式使用自定义指令：

扩展

如果有人觉得在 vue 组件里面要写 data，props，computed 和 methods 不够优雅，可以参考下这个插件 vue-class-component，它能让你使用 ES6 的 class 和 ES7 的装饰器编写 vue 组件。

相关链接：
babel-plugin-transform-vue-jsx