vue3+typescript

// Vue 3 + TypeScript 示例代码

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

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

export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({ count: 0 });

    const increment = () => {
      state.count++;
    };

    return {
      message: 'Hello Vue 3 with TypeScript!',
      state,
      increment,
    };
  },
});
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

• 模板部分 (<template>)：包含了一个简单的 HTML 结构，展示了 message 和 state.count 的值，并绑定了一个点击事件到 increment 方法。
• 脚本部分 (<script lang="ts">)：使用了 Vue 3 的 Composition API 和 TypeScript。通过 reactive 创建了一个响应式的 state 对象，并定义了一个 increment 方法来更新 state.count。
• 样式部分 (<style scoped>)：为组件添加了一些基本的样式，scoped 属性确保这些样式只应用于当前组件。

这个示例展示了如何在 Vue 3 中结合使用 TypeScript 来构建响应式组件。