【三十天精通Vue 3】第二十六天 Vue3 与 TypeScript 最佳实践
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">{{ counter }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'TypeScriptExample',
setup() {
const message = 'Vue 3 with TypeScript';
const counter = ref(0);
function increment(): void {
counter.value++;
}
return { message, counter, increment };
}
});
</script>这个例子展示了如何在Vue 3中结合TypeScript使用。我们使用<script lang="ts">标签来指定脚本使用TypeScript。我们使用defineComponent来定义组件，并通过setup函数来提供响应式数据和方法。ref函数用来创建响应式的基本类型变量。
评论已关闭