vue3 学习

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    // 使用 ref 创建一个响应式变量
    const message = ref('Hello Vue 3!');

    // 定义一个方法来改变 message 的值
    const changeMessage = () => {
      message.value = 'Hello World!';
    };

    return {
      message,
      changeMessage
    };
  }
};
</script>

<style scoped>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

解释说明：

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

   • 使用了简单的 HTML 结构，包含一个 h1 标签和一个按钮。
   • {{ message }} 是 Vue 的插值语法，用于在页面上显示 message 变量的值。
   • 按钮绑定了一个点击事件 @click="changeMessage"，当按钮被点击时会调用 changeMessage 方法。

2. 脚本部分 (<script>):

   • 导入了 Vue 3 的 ref 函数，用于创建一个响应式的变量 message。
   • setup 函数是 Vue 3 组合式 API 的入口，所有逻辑都在这里定义。
   • message 是一个响应式变量，初始值为 'Hello Vue 3!'。
   • changeMessage 方法用于改变 message 的值为 'Hello World!'。
   • 最后返回 message 和 changeMessage，使其可以在模板中使用。

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

   • 添加了一些简单的样式，使页面居中对齐，并且有一定的顶部间距。