Javascript is required
Vue3 JSX
前端

JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写HTML标记语言.

JSX被编译后，是一个函数调用，返回值为JS对象，故JSX也可作为表达式.

首先初始化项目

npm init @vitejs/app demo

cd demo
yarn 
yarn dev

看到根目录已经引入Vue插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

如果需要使用jsx，则需要引入相关插件。Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。

yarn add @vitejs/plugin-vue-jsx

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
    })
  ]
})

image-20210527144120884

image-20210527144131547

模版写法。

image-20210527144302240

JSX写法。

利⽤ Babel 赋予的编译能⼒，实现模板和 JSX 跨语⾔联动，以⽤户的需求为抓⼿，摸索出⼀套适⽤于 Vue 的 JSX 法 论，打造 Vue ⽣态闭环，利⽤ TypeScript 的类型提示，为更习惯于 JSX 的开发者赋能 .

输出JSX对象

image-20210527145409143

image-20210527145431370