前言
本文主要给大家介绍的是关于利用jsx写vue组件，下面话不多说，来一起看看详细的介绍吧。
我们平常写vue的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且vue作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。
下面我们要讲的是如何在vue里面写jsx，知道react的人应该都知道jsx，jsx的一个特性就是非常灵活，虽然有的人觉得jsx很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。
在使用jsx之前我们需要安装一个babel插件（babel-plugin-transform-vue-jsx ）
安装方式：
Syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
然后再.babelrc里面添加：
接着我们就可以愉快地在vue里面编写jsx了。
Test.vue
export default {
props: ['onClick','isShow'],data() {
return {
test: 123
};
},render() {
return (
@H_301_27@
{ this.test }
{ this.isShow + '' }
);
}
}
