vue3 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. <template> 部分:

   • 使用了两个插值表达式 {{ message }} 和 {{ count }} 来显示 message 和 count 的值。
   • 绑定了一个点击事件到按钮上，当按钮被点击时调用 increment 方法。

2. <script setup> 部分:

   • import { ref, reactive } from 'vue';：从 Vue 中导入 ref 和 reactive 函数。
   • const message = ref('Hello Vue 3 with Script Setup!');：使用 ref 创建了一个响应式的字符串变量 message。
   • const count = ref(0);：使用 ref 创建了一个响应式的数字变量 count。
   • function increment() { count.value++; }：定义了一个方法 increment，每次调用时将 count 的值加 1。

3. <style scoped> 部分:

   • 可以在这里添加样式，scoped 属性确保这些样式只作用于当前组件。