关于项目中的tsx文件

TIP

声明：项目中未使用 React 任何相关的插件及工具。

tsx写法是 vue3 官方支持的写法。

tsx写法可以和 SFC写法 进行互转，查看互转规则

什么是 `TSX写法` ？

TSX 是 TypeScript 的一种语法扩展，用于在 JavaScript 中编写 JSX（JavaScript XML）语法的组件。它通常用于在 React 应用中编写组件。

TSX 的写法结合了 TypeScript 和 JSX，允许在 JavaScript 代码中直接使用 HTML 标签和 XML 语法来描述 UI 组件的结构。

下面是一个简单的 TSX 示例：

tsx

import { ElButton } from 'element-plus';
import { defineComponent } from 'vue';


export default defineComponent({
    setup() {


        return () => (<>
            <ElButton>Hello World!</ElButton>
        </>);
    }
});

import { ElButton } from 'element-plus';
import { defineComponent } from 'vue';


export default defineComponent({
    setup() {


        return () => (<>
            <ElButton>Hello World!</ElButton>
        </>);
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13

什么是 `SFC写法` ？

SFC 是 Vue 的单文件组件（Single File Component）的缩写。它是 Vue.js 框架中一种常见的代码组织方式，允许你在单个文件中同时编写模板、样式和逻辑。

使用 SFC 的写法，你可以将模板、样式和逻辑都放在同一个文件中，提高了代码的可读性和维护性，并且能够更好地组织和复用组件。

一个典型的 SFC 文件通常包含以下三个部分：

1.<template>：用于编写组件的 HTML 模板。
2.<script>：用于编写组件的 JavaScript 逻辑。
3.<style>：用于编写组件的样式。

以一个简单的 Vue SFC 为例：

html

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increase">Increase</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    };
  },
  methods: {
    increase() {
      this.count++;
    }
  }
};
</script>

<style>
p {
  color: blue;
}
</style>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increase">Increase</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    };
  },
  methods: {
    increase() {
      this.count++;
    }
  }
};
</script>

<style>
p {
  color: blue;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

关于 项目中的tsx文件 #

什么是 TSX写法 ？ #

什么是 SFC写法 ？ #

关于项目中的tsx文件

什么是 `TSX写法` ？

什么是 `SFC写法` ？