tiny vue

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Tiny Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

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

解释说明

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

   • 使用了 Vue 的模板语法来定义组件的结构。
   • {{ message }} 和 {{ count }} 是 Vue 的插值表达式，用于将数据绑定到 HTML 中。
   • <button @click="increment"> 绑定了一个点击事件，当按钮被点击时会调用 increment 方法。

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

   • data() 函数返回一个对象，包含组件的状态（message 和 count）。
   • methods 对象中定义了 increment 方法，用于增加 count 的值。

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

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