jsx

0、v-model

　　1、与vue中使用一致

1、使用  { } 来使用js表达式，  {{}} 表示js对象

const name = 'zhangsan'
const list1 = <div>{name}</div>

const list1 = <div style={{width:'100px'}}>{name}</div>

2、一个元素只能有一个跟标签，不想使用额外标签可用 <> </>包裹

3、jsx中没有v-for，使用map代替。v-if也没有，用三元运算符或&&代替。可以使用v-show，也可以写成 vShow 这种形式

const render = (
    <ul>
         {
              list.map(({id, item})=>{
                   return (
                        <li key={id}>{item}</li>
                    )
              })
          }
    </ul>   
)                                

const render = () => (
  <div>
    { ok.value ? <div>yes</div> : <span>no</span> }
  </div>
)

const show = ref(false)
const render = () => (
  <div v-show={show}></div>
)
// 或者
const render = () => (
  <div vShow={show}></div>
)

4、绑定事件，把以on开头紧跟大写字母开头的属性作为事件监听

const render = (
    <div onClick={handleClick}></div>       
)

　　传递多个事件

babal中配置
{
     "transformOn": true
}

const rander = (
     <div on={{click: handleClick, input: handleInput}}></div>       
)

　　修饰符，直接在事件后拼接，驼峰写法

const render = () => (
  <input
    onClickCapture={() => {}}
    onKeyupOnce={() => {}}/>
)

 5、函数

const App = () => <div></div>;