vue script setup

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

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

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

// 定义一个方法
function increment() {
  count.value++;
}
</script>

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

解释说明：

1. <script setup>:

   • 这是 Vue 3 中引入的新语法糖，用于更简洁地编写组合式 API。它允许我们在 <script setup> 标签内直接使用 ref、reactive 等 Vue 组合式 API，而无需显式地返回它们。

2. ref 和 reactive:

   • ref 用于创建一个响应式的引用对象，通常用于基本数据类型（如字符串、数字等）。在模板中可以直接使用 ref 的值。
   • reactive 用于创建一个响应式的对象，适用于复杂的数据结构。

3. 模板中的绑定:

   • 在模板中，我们通过 {{ message }} 和 {{ count }} 来绑定 ref 的值，并且通过 @click 指令来绑定点击事件，调用 increment 方法。

4. 方法定义:

   • increment 方法用于增加 count 的值，由于 count 是一个 ref，所以需要通过 count.value 来访问和修改它的值。

5. 样式作用域:

   • <style scoped> 表示这些样式只应用于当前组件，不会影响其他组件。

这个示例展示了如何使用 <script setup> 来简化 Vue 3 组件的编写，并保持代码的简洁性和可读性。