Vue示例1

<template>
  <div class="app">
    <h1>hello</h1>
  </div>
</template>

<script lang="ts">
// 指定了一个模块的“默认导出”对象或值
// 每个模块只能有一个默认导出
// 导入时可以使用任意名称引用该默认导出
 export default {
  name: 'App'
 }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

<template>
  <div class="person">
    <h2>{{ name }}</h2>
    <p>Age: {{ age }}</p>
    <button @click="changeName('JAJA')">Change Name</button>
    <button @click="changeAge(25)">Change Age</button>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'Person',
  }
</script>

<script lang="ts" setup name="Person">
  import { ref } from 'vue';
  // 使用 ref 定义组件的响应式数据
  let name = ref('John Doe');
  let age = ref(30);

  function changeName(newName: string) {
    name.value = newName;
    console.log(`Name changed to: ${name.value}`);
  }

  function changeAge(newAge: number) {
    age.value = newAge;
    console.log(`age changed to: ${age.value}`);
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>