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 = 'Hello World!';
    }
  }
}
</script>

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

解释说明：

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

   • 定义了页面的结构，包含一个 div 元素，里面有一个 h1 标签用于显示消息，还有一个按钮用于触发消息的变化。

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

   • 使用 Vue 的单文件组件格式。
   • data() 函数返回一个对象，定义了组件的状态，这里有一个 message 属性。
   • methods 对象中定义了一个 changeMessage 方法，当点击按钮时会调用此方法，改变 message 的值。

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

   • 定义了组件的样式，并且使用 scoped 属性确保这些样式只应用于当前组件。