vue文件

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

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue is awesome!';
    }
  }
}
</script>

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

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

解释说明：

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

   • 这里定义了页面的结构。{{ message }} 是一个插值表达式，用于显示 data 中的 message 变量的值。
   • <button @click="changeMessage">Change Message</button> 定义了一个按钮，并绑定了点击事件，当按钮被点击时会调用 methods 中的 changeMessage 方法。

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

   • data() 函数返回一个对象，其中包含组件的状态数据。这里定义了一个 message 属性，初始值为 'Hello Vue!'。
   • methods 对象中定义了组件的方法。changeMessage 方法用于改变 message 的值为 'Vue is awesome!'。

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

   • scoped 关键字确保这些样式只应用于当前组件，而不会影响全局样式。
   • 样式定义了 #app 和 button 的样式，使页面布局更美观。