vue3写法

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 声明一个响应式变量
const message = ref('Hello Vue 3!');
const count = ref(0);

// 定义一个方法来增加计数
const increment = () => {
  count.value++;
};
</script>

<style scoped>
button {
  font-weight: bold;
}
</style>

解释说明：

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

   • 使用双大括号 {{ }} 绑定数据到视图中。
   • 使用 @click 指令绑定点击事件到 increment 方法。

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

   • 使用 <script setup> 语法糖，这是 Vue 3 的新特性，简化了组件的编写方式。
   • 使用 ref 创建响应式变量 message 和 count。
   • 定义了一个 increment 方法，当按钮被点击时会调用此方法并增加 count 的值。

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

   • 使用 scoped 属性确保样式只作用于当前组件。
   • 简单定义了一个按钮样式的例子。