npm install\ 
 
  babel-plugin-syntax-jsx\ 
 
  babel-plugin-transform-vue-jsx\ 
 
  babel-helper-vue-jsx-merge-props\ 
 
  babel-preset-es2015\ 
 
  --save-dev  

媒介

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

下面我们要讲的是如安在vue琅绫擎写jsx，知道react的人应当都知道jsx，jsx的一个特点就是异常灵活，固然有的人认为jsx很丑恶，把逻辑都写到模版的感到，但萝卜青菜各有所爱，合适本身合适团队的就是最好的。

在应用jsx之前我们须要安装一个babel插件(babel-plugin-transform-vue-jsx )

安装方法：

然后再.babelrc琅绫擎添加：

{ 
 
"presets": ["es2015"], 
 
"plugins": ["transform-vue-jsx"] 
 
}  

接着我们就可以高兴地在vue琅绫擎编写jsx了。

Test.vue

<script> 
 
export default { 
 
    props: ['onClick', 'isShow'], 
 
    data() { 
 
        return { 
 
            test: 123 
 
        }; 
 
    }, 
 
    render() { 
 
        return ( 
 
            <div class="test" onClick={ this.onClick }> 
 
                { this.test } 
 
                { this.isShow + '' } 
 
            </div> 
 
        ); 
 
    } 
 
} 
 
</script>  

这里要留意的一点是vue琅绫擎编写jsx和在react琅绫擎的jsx语法照样有一点不一样的。

2.在jsx琅绫擎惹人vue模版组件，这琅绫腔有什么要留意的，除了连接符式的属性要转换成驼峰式，还有一个须要留意的是指令，如不雅用了jsx，那么内置的指令都不会生效(除了v-show)，好在内置指令大年夜部分都可以用jsx描述。那么自定义指令要怎么竽暌姑呢?

　　推荐阅读

　　尴尬了：谷歌Android Samba应用仅支持不安全的SMBv1

近日谷歌初次推出其新的Android Samba应用，这显然不是好的宣布机会，因为在不久前，在重大年夜进击变乱中进击者就应用了该应用中安排的不安然版本SMB协定。比来几个月来，办事器消息块(SMBv1)协定中的马脚经由过程>>>详细阅读

本文标题：用Jsx写Vue组件

地址：http://www.17bianji.com/lsqh/36384.html

 1/2    1