Vue3+TS学习day01

<template>
  <div>
    <h1>{{ msg }}</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 count = ref(0);
    const msg = ref('Hello Vue 3 + TypeScript Setup');
 
    function increment() {
      count.value++;
    }
 
    return { count, msg, increment };
  }
});
</script>

这个例子展示了如何在Vue 3中使用TypeScript和组合式API（setup函数）来创建响应式数据和函数。代码首先引入了必要的Vue组件定义函数defineComponent和响应式引用对象工厂函数ref。在setup函数中，我们创建了一个响应式引用对象count和msg，并定义了一个函数increment来改变count的值。最后，我们通过返回值将它们暴露给模板使用。