tsx与在vue中的运用

转

1、vue中使用

　　有两种写法：选项式、函数式

//选项式
<script lang="tsx">
import {defineComponent } from 'vue'
export default defineComponent({
　　setup() {
    　　return () => (<div>vue3+tsx</div>)
  　　}
})
</script>

 

//函数式
export default() => {
  return () => (<div>vue3+tsx</div>)
}

 

2、基本用法

　　0、v-model

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