vue setup

作者：戮尽逆者发布日期:2025-02-11 浏览:102

<script setup>
// 这是 Vue 3 的 <script setup> 语法示例

// 定义一个响应式状态
import { ref } from 'vue';

const count = ref(0);

// 定义一个方法来更新状态
function increment() {
  count.value++;
}

</script>

<template>
  <!-- 使用定义的状态和方法 -->
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</template>

<style scoped>
/* 添加一些样式 */
button {
  font-size: 16px;
}
</style>

解释说明：

<script setup> 是 Vue 3 中引入的新语法糖，用于简化组件的编写。
ref 是 Vue 提供的一个函数，用于创建响应式数据。count 是一个响应式的变量，初始值为 0。
increment 是一个方法，点击按钮时会调用此方法，将 count 的值加 1。
<template> 部分展示了如何在模板中使用这些定义的状态和方法。
<style scoped> 用于为当前组件添加局部样式。

上一篇：vue3计算属性

下一篇：vue video