Vue 之 vue3 与 TS 的配合使用整理
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">{{ count }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Counter',
setup() {
const count = ref(0);
const message = 'Hello Vue 3 + TypeScript';
function increment(): void {
count.value++;
}
return { count, message, increment };
}
});
</script>
这个例子展示了如何在Vue 3中使用TypeScript,包括如何定义组件、使用响应式数据以及定义方法。<script lang="ts">
标签表明了脚本使用的是TypeScript。defineComponent
是Vue 3中用于定义组件的API。ref
函数用于创建响应式引用。setup
函数是一个新的组件选项,用于组织组件的逻辑。
评论已关闭