【2024最新】vue3的基本使用(超详细)
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="increment">Count is: {{ count }}</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
// 定义响应式数据
const count = ref(0)
// 定义方法
function increment() {
count.value++
}
// 观察响应式数据的变化
watch(count, (newCount, oldCount) => {
console.log(`count changed from ${oldCount} to ${newCount}`);
})
</script>
<style scoped>
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
}
</style>这个例子展示了Vue 3的基本使用方法。它包括了响应式数据（ref）的定义、方法的声明、以及样式的局部作用域。同时，它还使用了watch来观察响应式数据的变化，并在变化发生时执行一些操作。这个例子是一个简单的计数器，但它展示了Vue 3开发中常用的概念和模式。
评论已关闭