vue3开发

// Vue 3 示例代码：一个简单的计数器应用

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式变量 `count`
    const count = ref(0);

    // 定义一个方法来增加 `count` 的值
    const increment = () => {
      count.value++;
    };

    // 返回需要在模板中使用的变量和方法
    return {
      count,
      increment
    };
  }
};
</script>

<style scoped>
/* 简单的样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

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

解释说明：

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

   • 使用了双大括号语法 {{ count }} 来显示 count 的值。
   • 使用了 @click 指令绑定按钮点击事件，调用 increment 方法。

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

   • 使用了 ref 函数创建了一个响应式的 count 变量，初始值为 0。
   • 定义了一个 increment 方法，每次点击按钮时会将 count 的值加 1。
   • 使用 setup 函数返回需要在模板中使用的变量和方法。

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

   • 添加了一些简单的样式，确保页面看起来更美观。scoped 属性确保这些样式只应用于当前组件。