vue3+ts

// Vue 3 + TypeScript 示例代码

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

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

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('Hello Vue 3 with TypeScript!');
    const count = ref(0);

    const increment = (): void => {
      count.value++;
    };

    return {
      message,
      count,
      increment,
    };
  },
});
</script>

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

解释说明：

1. 模板部分 (<template>):

   • 使用了两个绑定：{{ message }} 和 {{ count }}，分别用于显示消息和计数器的值。
   • 绑定了一个点击事件 @click="increment"，当按钮被点击时调用 increment 方法。

2. 脚本部分 (<script lang="ts">):

   • 使用 defineComponent 来定义组件，并使用 ref 创建响应式数据 message 和 count。
   • 定义了一个方法 increment，每次点击按钮时会增加 count 的值。
   • 返回的对象中包含了所有要在模板中使用的属性和方法。

3. 样式部分 (<style scoped>):

   • 使用了简单的 CSS 样式来美化组件，scoped 属性确保这些样式只应用于当前组件。