Vue 3 学习指南：从入门到精通
<template>
<div>
<h1>{{ message }}</h1>
<button @click="incrementCounter">点击我</button>
<p>点击次数: {{ counter }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = 'Vue 3 学习指南';
const counter = ref(0);
function incrementCounter() {
counter.value++;
}
return { message, counter, incrementCounter };
}
}
</script>这个简单的Vue 3组件示例展示了如何使用<script setup>语法简化组件的编写。它包括了响应式数据（counter）和一个用于增加计数器值的方法（incrementCounter）。通过使用ref函数来创建一个响应式引用，我们可以在模板中直接绑定和更新这个值。这种语法让Vue 3的组件更加简洁和易于理解。
评论已关闭