vue h5

<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 H5!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue H5 is awesome!';
    }
  }
}
</script>

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

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

解释说明：

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

   • 定义了一个简单的 HTML 结构，包含一个 h1 标签和一个按钮。
   • 使用了双大括号语法 {{ message }} 来绑定数据属性 message 到 h1 标签中。
   • 按钮绑定了一个点击事件 @click="changeMessage"，当点击按钮时会调用 changeMessage 方法。

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

   • 导出了一个 Vue 组件对象，定义了组件的名称为 App。
   • 在 data 函数中返回了一个包含 message 属性的对象，初始值为 'Hello Vue H5!'。
   • 定义了一个 methods 对象，其中包含 changeMessage 方法，用于修改 message 的值。

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

   • 简单的 CSS 样式，居中对齐文本，并设置了按钮的样式。