vue 页面

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="updateMessage">点击更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到 Vue 页面'
    };
  },
  methods: {
    updateMessage() {
      this.message = '你已经成功更新了消息';
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

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

   • 包含一个 div 容器，其中有一个 h1 标签用于显示消息。
   • 还有一个按钮，点击后会触发 updateMessage 方法来更新消息内容。

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

   • 使用 data 函数返回一个对象，包含一个 message 属性，初始值为 "欢迎来到 Vue 页面"。
   • methods 中定义了一个 updateMessage 方法，点击按钮时会调用此方法，将 message 更新为 "你已经成功更新了消息"。

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

   • scoped 关键字确保这些样式只应用于当前组件。
   • 设置了一些基本的样式，如字体、对齐方式和颜色等。