vue ts

// Vue 3 + TypeScript 示例代码

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Clicked {{ count }} times</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>

解释说明：

• 模板部分 (<template>)：定义了页面的结构，包含一个 h1 标签用于显示消息和一个按钮，点击按钮会触发 increment 方法。

• 脚本部分 (<script lang="ts">)：

  • 使用 defineComponent 来定义组件，这是 Vue 3 推荐的方式，特别是当你使用 TypeScript 时。
  • ref 是 Vue 的响应式 API，用于创建响应式的变量。这里我们创建了两个 ref 变量：message 和 count。
  • increment 是一个方法，用于递增 count 的值。
  • 最后返回的对象包含了所有需要在模板中使用的数据和方法。

• 样式部分 (<style scoped>)：定义了组件的样式，并且通过 scoped 属性确保这些样式只应用于当前组件。