引言

今天我们来一起学习一下Vue3中的jsx写法。jsx语法我用的也不是很熟，今天我们来一起体验一下jsx吧

jsx是什么

首先，jsx并不是Vue3的专属，更出名的是在于React中的应用。如果写过React的项目的话可能对jsx的语法非常熟悉。总的来说，JSX是一个 JavaScript 的语法扩展。而不是Vue3的独特语法糖。

安装与配置

我们在Vite工程中，可以这样引入jsx。

    npm install @vitejs/plugin-vue-jsx

yarn,pnpm也同理

接下来我们要在文件里配置一下

首先打开vite.config.ts文件

参考配置如下

// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vueJsx()]
}

我们开始写jsx,但是因为我们工程中往往会使用TypeScript，而这样就会出现，我们使用了jsx，报错了，但是页面还正常的情况。

所以我们要配置一下ts。

打开tsconfig.ts文件

// tsconfig.ts
{
  "jsx": "preserve",
}

添加如上配置。

接下来我们就可以开心的写jsx啦。

关于v-model的写法

先看一下Vue3的正常的写法

<template>
  <input v-model="value1" />
  {{ value1 }}
</template>

<script setup lang="ts">
  import { Ref , ref } from "vue";
  let value1:Ref<string> = ref('');
</script>

效果如上。很简单，这里不多赘述。

接下来我们来尝试一下jsx的语法。

<input v-model={value} />

事件绑定上我们可以尝试上面的语法。

{} 是jsx的万能的用法，里面可以写js的表达式，循环逻辑操作等等

再来个例子:

<tempalte> 
    <div :pos="pos">{{pos}}</div> 
</template>

传统的temalte写法如上，再看个jsx写法

setup() {
  let pos = 1           
  return ()=><div pos={pos}>{pos}</div>
}

再看一下常见的循环

在Vue3经典的写法中:

  <tempalte>
     <span v-for="item in Arr" :key="item.label">{{item.label}}</span> 
  </template>

再看一下jsx

//jsx 写法
setup() {
  const Arr= ref([{label:'1'},{label:'2'},{label:'3'}]);      
  return ()=>(   
     <>
     { Arr.value.map(item=> <span key={item.label}>{item.label}</span> ) }
     </>
    ) 
}

我们使用了map的方法来作为循环

再看一下v-if和v-show

  setup() {
    const msg = ref("tsx component");
    const isShow = ref(false);

    function onClick() {
      isShow.value = !isShow.value;
    }

    return () => {
      return (
        <div>
          <div>{msg.value}</div>
          {isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
          <el-button onClick={onClick}>onClick</el-button>
        </div>
      );
    };
  },

简单就说这些吧，先和大家体验了一把jsx的基础语法，大家感兴趣的也可以继续深入学习