vue实现的例子
以下是一个基于 Vue 3 的简单示例，展示如何创建一个计数器组件并实现交互功能：
计数器组件示例
<template>
<div>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>组合式API示例
使用 Vue 3 的组合式 API 实现相同功能：
<template>
<div>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
</script>父子组件通信示例
父组件：
<template>
<ChildComponent :message="parentMessage" @update="handleUpdate"/>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const parentMessage = ref('来自父组件的消息')
const handleUpdate = (newMessage) => {
parentMessage.value = newMessage
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="notifyParent">通知父组件</button>
</div>
</template>
<script setup>
defineProps({
message: String
})
const emit = defineEmits(['update'])
const notifyParent = () => {
emit('update', '子组件更新了消息')
}
</script>生命周期钩子示例
<script setup>
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件已挂载')
})
onUnmounted(() => {
console.log('组件已卸载')
})
</script>这些示例涵盖了 Vue 的核心功能，包括响应式数据、组件通信和生命周期管理。可以根据实际需求进行扩展和修改。
