配置

// vite.config.js
export default {
  plugins: [vue()],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
}

文件定义

jsx/tsx:

// 需要用到props等一系列状态
import { defineComponent, h, ref } from 'vue'
export default defineComponent({
  props: {
  },
  setup(props) {
    return ()=> (
     <div>你好，到二仙桥吗？</div>
    )
  }
})

下面这种写法有一个很坑的地方：msg.value失去了响应，就是点击div之后，div里的内容不会变成‘二仙桥’

// 不需要用到props等....
export default function(){

  const msg = ref("成华大道到哪儿？")
  const click=()=>{
    msg.value= "二仙桥"
  }

  return (
    <div onClick={click}>
      {msg.value}
    </div>
  )
}

一些语法注意点：

1. 标签必须严格闭合，否则无法编译通过，如：<input type="text" name="" id="">这样是不行的，一定要：<input type="text" name="" id=""/>
2. 第一种写法一定要import {h} from "vue"。最后还是会处理成这样。

 return ()=> h(
     <div>你好，到二仙桥吗？</div>
    )

v-bind

绑定标签属性。

注意点：

1. 属性的写法上和 HTML 存在区别，在写 JSX 的时候，所有的属性都是驼峰式的写法.如：className. 有些属性名不能直接绑定，如：for、class。for-> className for-> htmlFor
2. data-* 和 aria-* 两类属性是和 HTML 一致的 data系列是指自定义数据。 aria系列是指一般是为不方便的人士提供的功能。
3. ide的智能提示做的好，别担心。

绑定span的title。

export default function(){
  const msg=ref('小火汁?')  
  return(
    <span title={msg.value}>
      走成华大道(鼠标停一哈看提示)
    </span>
  )
}

v-for

export default defineComponent({
setup(props) {
    
  const goods = ref(["贝斯特橱柜","民思达电动车"])
  const msg = ref("商品出售：")

  return ()=>h(
    <div>
      {
        goods.value.map(
          i=>{
            return <div>{i}</div>
          }
        )
      }
    </div>
    )
  }
})

v-if

三目运算符

export default function(){
  const show=ref(true)
  return (
    <div>
      {show.value?"有人":"没有人"}
    </div>
  )
}

就这？这很不js啊，还有更好的办法吗？ 因为JSX里是对象，不能是语句。。。

// 也没有多好吧....
export default function(){
  const show=ref(true)
  let msg;
  if (show.value){
     msg = <span>有人</span>
  }else{
    msg = <span>没有人</span>
  }
  return (
    <div>
      {msg}
    </div>
  )
}

v-on

这一类其实就是各种事件的绑定！

import { defineComponent, h, reactive, ref } from 'vue'
//有状态的路由~
export default defineComponent({
  setup(popps) {
    const msg = ref("正常小火?‍?")
    const click=()=>{
      msg.value= "精神小火?‍♂️"
      console.log("变了啊！")
    }
  
    return()=> (
      <div onClick={click}>
        {msg.value}
      </div>
    )
  }
})

v-show

用css控制吧，略。

model

自己发挥~

import { defineComponent, ref ,h} from 'vue'

export default defineComponent({
  setup(props) {
    
    const msg = ref("成华大道到哪儿？")
  const click=()=>{
    msg.value= "二仙桥"
  }

  return ()=>h(
    <div onClick={click}>
      {msg.value}
    </div>
    )
  }
})