vue2项目的书写格式

在 Vue.js 2 中，你可以使用以下格式来书写 Vue 组件：

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

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

<style scoped>
/* 样式代码 */
</style>

在这个示例中，我们定义了一个简单的 Vue 组件，包括模板、JavaScript 代码和样式。具体来说：

- `<template>` 部分包含了组件的 HTML 结构，使用双括号插值语法 `{{}}` 来显示数据。
- `<script>` 部分包含了 Vue 组件的 JavaScript 部分。`data` 函数返回对象，包含了组件的数据。`methods` 对象包含了组件的方法。
- `<style>` 部分包含了组件的样式。使用 `scoped` 属性可以使得样式只作用于当前组件。