vue前端模板

<template>
  <div id="app">
    <!-- 这是一个简单的 Vue 组件模板 -->
    <h1>{{ message }}</h1>
    <button @click="increment">点击次数: {{ count }}</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: '欢迎使用 Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

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

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

解释说明

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

   • 定义了 HTML 结构。
   • 使用双大括号 {{ message }} 和 {{ count }} 来绑定数据。
   • 使用 @click 指令来绑定点击事件，当按钮被点击时调用 increment 方法。

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

   • 导出一个默认的 Vue 组件。
   • data 函数返回组件的状态（即响应式数据），包括 message 和 count。
   • methods 对象定义了组件的方法，如 increment 方法用于增加 count 的值。

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

   • 定义了组件的样式。
   • scoped 属性确保这些样式只应用于当前组件，不会影响全局样式。

这个示例展示了如何创建一个简单的 Vue 组件，并通过数据绑定和事件处理实现交互功能。