Vue 3 中使用 TypeScript 和 Composition API

作者：System 时间：2024年08月14日分类：所有,typescript 字数：696

这篇文章距离上次修改已过268天，其中的内容可能已经有所变动。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const message = 'Hello Vue 3 with TypeScript and Composition API!';

    function increment() {
      count.value++;
    }

    return {
      count,
      message,
      increment
    };
  }
});
</script>

这个例子展示了如何在Vue 3中使用TypeScript和Composition API创建一个简单的计数器应用。<script>标签的lang="ts"属性表明了其中的代码使用TypeScript。setup函数是一个新的Composition API入口点，它允许我们使用ref来创建响应式数据，定义方法，并在return中暴露它们以供模板使用。

Vue 3 中使用 TypeScript 和 Composition API

评论已关闭

推荐阅读