//vue2
<script lang='ts'>
// 使用TypeScript定义Vue组件
export default {
  // 组件的名字，用于调试工具中识别组件。这里命名为"HelloWorld"
  name: "HelloWorld",

  // 返回一个对象，包含组件的所有响应式数据
  data () {
    return {
      name: '请问', // 用户的名字，默认值为'请问'
      age: 18,      // 用户的年龄，默认值为18
      tel: '12312312312' // 用户的电话号码，默认值为'12312312312'
    }
  },

  // 定义组件的方法集合
  methods: {
    // 修改用户的名字为'qw'
    changeName() {
      this.name = 'qw';
    },

    // 增加用户的年龄，每次点击增加2岁
    changeAge() {
      this.age += 2;
    },

    // 显示用户的电话号码
    showTel() {
      alert(this.tel); // 弹出警告框显示电话号码
    }
  }
}
</script>

<template>
  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
  <div class="HelloWorld">
    <!-- 动态显示用户的名字 -->
    <h2>姓名：{{ name }}</h2>

    <!-- 动态显示用户的年龄 -->
    <h2>年龄：{{ age }}</h2>

    <!-- 按钮，点击时调用`changeName`方法修改名字 -->
    <button @click="changeName">点击修改名字</button>

    <!-- 按钮，点击时调用`changeAge`方法增加年龄 -->
    <button @click="changeAge">点击修改年龄</button>

    <!-- 按钮，点击时调用`showTel`方法显示电话号码 -->
    <button @click="showTel">点击查看号码</button>
  </div>
</template>

<style scoped>
/*
  .person 类选择器，仅应用于当前组件内部的元素，
  注意：这里的类名应与模板中的类名一致（应该是.HelloWorld而不是.person）
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.HelloWorld {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px;       /* 添加阴影效果 */
  border-radius: 10px;        /* 设置圆角半径 */
  padding: 20px;              /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}
</style>
