)
}
}
export default Dashboard
插值
在JSX中使用单个括号来绑定文本插值
<span>Message: {this.messsage}</span>
<!-- 类似于v-html -->
<div domPropsInnerHTML={this.dangerHtml}/>
<!-- v-model -->
<el-input v-model={this.vm.name} />
在jsx中不需要把v-model分成事件绑定和赋值二部分分开来写，因为有相应的babel插件来专门处理。
样式
在JSX中可以直接使用class=”xx”来指定样式类，内联样式可以直接写成style=”xxx”
<div class="btn btn-default" style="font-size: 12px;">Button</div><!-- 动态指定 -->
<div class={`btn btn-${this.isDefault ? 'default' : ''}`}></div>
<div class={{'btn-default': this.isDefault, 'btn-primary': this.isPrimary}}></div>
<div style={{color: 'red', fontSize: '14px'}}></div>
遍历
在JSX中没有v-for和v-if等指令的存在，这些全部需要采用Js的方式来实现
{/* 类似于v-if */}
{this.withTitle && <Title />}{/* 类似于v-if 加 v-else */}
{this.isSubTitle ? <SubTitle /> : <Title />}
{/* 类似于v-for */}
{this.options.map(option => {
<div>{option.title}</div>
})}
事件绑定
事件绑定需要在事件名称前端加上on前缀，原生事件添加nativeOn
<!-- 对应@click -->
<el-buton onClick={this.handleClick}>Click me</el-buton>
<!-- 对应@click.native -->
<el-button nativeOnClick={this.handleClick}>Native click</el-button>
<!-- 传递参数 -->
<el-button onClick={e => this.handleClick(this.id)}>Click and pass data</el-button>
注意：如果需要给事件处理函数传参数，需要使用箭头函数来实现。如果不使用箭头函数那么接收的将会是事件的对象event属性。
高级部分
在Vue中基于jsx也可以把组件拆分成一个个小的函数式组件，但是有一个限制是必需有一个外层的包裹元素，不能直接写类似：
const Demo = () => (
<li>One</li>
<li>Two</li>
)
必需写成：
const Demo = () => (
<div>
<li>One</li>
<li>Two</li>
</div>
)
而在React中可以使用空标签<></>和<react.Fragment></react.Fragment>来实现包裹元素，这里的空标签其实只是react.Fragment的一个语法糖。同时在React 16中直接支持返回数组的形式：
