一文带你打通VueTypeScript基础
warning:
这篇文章距离上次修改已过184天,其中的内容可能已经有所变动。
<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 = 'Vue 3 + TypeScript';
function increment() {
count.value++;
}
return { count, message, increment };
}
});
</script>
这个Vue 3组件使用了TypeScript,并展示了如何使用<script lang="ts">
标签来声明TypeScript的使用。它还演示了如何使用ref
来创建响应式数据,以及如何在模板中使用这些数据。setup
函数是组件内使用Composition API的场所,它返回一个对象,该对象的属性可在模板中访问。
评论已关闭