jsx

番茄西红柿u發表於2024-07-29
JS

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>;

相關文章