TypeScript快速上手语法+结合vue3用法
// 定义一个Vue组件
<template>
<div>{{ greeting }} {{ name }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'HelloWorld',
setup() {
// 响应式数据
const name = ref('Vue3');
// 计算属性
const greeting = 'Hello,';
// 返回值会被用作组件的响应式数据
return { greeting, name };
}
});
</script>这个例子展示了如何在Vue 3中使用TypeScript创建一个简单的组件。<script lang="ts">标签表明了脚本使用TypeScript编写。defineComponent函数是Vue 3中用于定义组件的API。ref函数用于创建响应式数据。setup函数是组件内使用Composition API的入口点。在setup函数中，我们定义了响应式数据name和计算属性greeting，并在模板中展示了它们。这个例子简单且直接地展示了如何在Vue 3和TypeScript中编写组件。
评论已关闭