配置JSX

jsx学习

https://vue-jsx-explorer.netlify.app/#const%20App%20%3D%20()%20%3D%3E%20%3Cdiv%3EHello%20World%3C%2Fdiv%3E%20%3D%3E%20%3Cdiv%3EHello%20World%3C%2Fdiv%3E)

配置

yarn add @vitejs/plugin-vue-jsx

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [ vueJsx()]
})

{
  // include 需要包含tsx
"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"],
 "compilerOptions": {
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
 }
}

使用

export default definedComponents({
  setup(props){
    return ()=>(
      <div>
      Hello,World
      </div>
    )
  }
})

<script lang='tsx'>
import {definedComponents} from 'vue'
export default definedComponents({
  setup(props){
    return ()=>(
      <div>
      Hello,World
      </div>
    )
  }
})
</script>

jsx中 使用 transition

import {Transition,ref} from 'vue'
export default definedComponents({
  setup(props){
    // 只有点击时执行
    const a = ref(false)
    return ()=>(
      <>
        <Transition>
        <div v-show={a}></div>
      </Transition>
    )
  }
})

// jsx/tsx中循环出来的标签元素上有点击事件的话 会自动调用事件
// 例如
export default definedComponents({
  setup(props){
    // 只有点击时执行
    const click = (e,val)=>{
      consloe.log(e,val)
    }
    return ()=>(
      <>
      {[1,2,3].map((item,index)=>{
        return (
          <div onClick={(e)=>{click(e,'112')}}><>
        )
      })}
      </>
    )
  }
})

Demo

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>
<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>

Setup

<script setup lang="ts">
// TypeScript enabled
import { ref } from 'vue'
const count = ref(1)
</script>
<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>