学废vue3第一天：学会使用jsx开发

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

前言

学习vue3已经好久力，虽然没有在实际工作中使用（万恶的ie），但是必须要说一句真香，后面粗略的使用jsx进行开发，发现更香力，我个人觉得是这样的。本文使用vue3+vite+jsx进行开发第一天。

在vite官方文档是有说vue用户需要使用jsx需要安装 @vitejs/plugin-vue-jsx 插件

安装并改造组件

yarn create vite-demo

yarn add @vitejs/plugin-vue-jsx

并在vite.config.js里面配置

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()]
})

• 将以.vue结尾的组件改为.jsx结尾
• 导出组件使用defineComponent()函数

写法如下：

import { defineComponent } from "vue";
export default defineComponent({
  name:"HelloWorld"
  setup() {
    return () => (
      <>
        <div>这是jsx语法</div>
      </>
    )
  }
})

接下来的语法都是在里面进行的。只写出关键代码。

模版语法改为{}

模版语法使用{{}}来解析文本内容

<div> {{ 变量名 }} </div>

而jsx使用{}:

const info= "这是jsx语法"
    return () => (
      <>
        <div>{info}</div>
      </>
    )

v-for改为map

直接使用v-for是无法使用的，必须在js里面使用循环，推荐使用map

const list = [1,2,3,4]
    return () => (
      <>
        {/* <div>{info}</div> */}
        <ul>
           {list.map(e=><li>e</li>)}
        </ul>
      </>
    )

注意：在html里面写js语法，代码必须要用{}包裹起来.

v-if改为&&

const bool = true
    return () => (
      <>
        {bool && "我是一个好人"}
      </>
    )

其他几个，如v-else-if就改为三目运算符等

标签属性绑定

以前使用v-bind绑定某个属性，现在使用{}

const href = 'baidu.com'
    return () => (
      <>
       <a href={href}></a>
      </>
    )

这里不是使用响应式数据，如果使用ref,在{}里面要加上.value,当然可以显式开启reactivityTransform:true

类名绑定

• className绑定
• class属性绑定一个数组

import { defineComponent, render } from "vue";
import style from './index.module.css';
console.log(style.red)
export default defineComponent({
  setup() {
    // const info= "这是jsx语法"
    const list = [1,2,3,4]
    const bool =$ref(true)
    return () => (
      <>
        {/* <div>{info}</div> */}
        <ul>
           {list.map(e=><li className={style.red}>e</li>)}
        </ul>
        <p class={[style.blue]}>  {bool && "我是一个好人"} </p>
      </>
    )
  }
})

注意：使用class绑定某个css变量名时，css必要以module.css结尾。

end

每天进步一点点！！！