## **JSX语法：**
**在JSX语法中，{}是js的运行环境**
**一：使用变量或者调用函数使用单括号**
```
render() {
return <p>hello { this.message }</p>
}
```
**二：使用组件,无需在components中定义，可以直接使用**
~~~
import MyComponent from './my-component'
export default {
render() {
return <MyComponent>hello</MyComponent>
},
}
~~~
**三：属性和Props**
1.直接在标签上面使用：
~~~
render() {
return <input type="email" />
}
~~~
2.使用变量：
~~~
render() {
return <input
type="email"
placeholder={this.placeholderText}
/>
}
~~~
3.使用对象的形式，需要配合对象的展开运算符`...`使用,注意对象需要符合渲染函数的`数据对象`
~~~
render() {
const inputAttrs = {
type: 'email',
placeholder: 'Enter your email'
}
return <input {...{ attrs: inputAttrs }} />
//渲染结果：<input type="email" placeholder="Enter your email">
}
~~~
**四：插槽**
1.具名插槽：
~~~
render() {
return (
<MyComponent>
<header slot="header">header</header>
<footer slot="footer">footer</footer>
</MyComponent>
)
}
~~~
2.作用域插槽:
~~~
render() {
const scopedSlots = {
header: () => <header>header</header>,
footer: () => <footer>footer</footer>
}
return <MyComponent scopedSlots={scopedSlots} />
}
~~~
**五：指令**
1. `v-model`双向绑定
~~~
<input vModel={this.newTodoText} />
~~~
2.也可以直接使用`v-model`
```
<input v-model={this.value}></input>
```
3.带有修饰符
~~~
<input vModel_trim={this.newTodoText} />
~~~
3.`v-html`
~~~
<p domPropsInnerHTML={html} />
~~~
**六：事件**
1.直接使用原生绑定`onClick`或者`onInput`,注意想要传递参数，请使用箭头函数的形式。
```
<button onClick={()=>this.onclick(100)}>onClick </button>
```
2.`vON:事件名称` 的形式绑定,但在编辑器中有错误警告。
~~~
<button vOn:click={()=>this.onclick(100)}>vOn </button>
~~~
3.使用对象的形式，需要配合对象的展开运算符`...`使用,注意对象需要符合渲染函数的`数据对象`
```
const on = {
click:()=>this.onclick(100)
}
return (
<div>
<button {...{ on }}>onClick </button>
</div>
)
```
4.使用事件修饰符
~~~
<input vOn:click_stop_prevent={this.newTodoText} />
~~~
#### **七：`v-if` 和`v-for`**
~~~
{/* 类似于v-if */}
{this.withTitle && <Title />}
{/* 类似于v-if 加 v-else */}
//使用三元运算符实现v-if
{this.isSubTitle ? <SubTitle /> : <Title />}
{/* 类似于v-for */}
//使用数组的map方法实现v-for
{this.options.map(option => {
<div>{option.title}</div>
})}
~~~
#### **八：样式**
在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>
~~~
>[success] 任意符合渲染函数的数据对象都可以直接写在JSX的元素中，例如 `<a {...{ 数据对象 }}></a>`
