前言
我们平常写 vue 的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且 vue 作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。
下面我们要讲的是如何在 vue 里面写 jsx，知道 react 的人应该都知道 jsx，jsx 的一个特性就是非常灵活，虽然有的人觉得 jsx 很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。
在使用 jsx 之前我们需要安装一个 babel 插件（babel-plugin-transform-vue-jsx）
安装方式：
|
1 2 3 4 5 6 7 |
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev |
然后再.babelrc 里面添加：
|
1 2 3 4 5 |
{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] } |
接着我们就可以愉快地在 vue 里面编写 jsx 了。
Test.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> export default { props: ['onClick', 'isShow'], data() { return { test: 123 }; }, render() { return ( <div class="test" onClick={ this.onClick }> { this.test } { this.isShow + '' } </div> ); } } </script> |
可以看到我们把 jsx 写在了 render 方法里面，render 方法是 vue2.0 才支持的，用来提供对虚拟 DOM 的支持，也就是说只有 vue2.0 才支持 jsx 语法转换。
这里要注意的一点是 vue 里面编写 jsx 和在 react 里面的 jsx 语法还是有一点不一样的。
一下是一段覆盖大部分语法的 vue jsx 代码：