vue实现例子
Vue 实现基础示例
以下是一个简单的 Vue 3 示例，展示如何创建一个计数器应用：
<template>
<div>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
return {
count,
increment,
decrement
}
}
}
</script>Vue 组件通信示例
父子组件通信示例：
父组件：
<template>
<ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '来自父组件的消息'
}
},
methods: {
handleChildEvent(data) {
console.log('子组件触发的事件:', data)
}
}
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="sendToParent">发送消息给父组件</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendToParent() {
this.$emit('child-event', '来自子组件的消息')
}
}
}
</script>Vue 路由示例
使用 Vue Router 的基本配置：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default routerVue 状态管理示例
使用 Pinia 进行状态管理：
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})组件中使用：
<template>
<div>
<p>计数: {{ counter.count }}</p>
<button @click="counter.increment()">增加</button>
</div>
</template>
<script>
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
const counter = useCounterStore()
return {
counter
}
}
}
</script>Vue 表单处理示例
双向数据绑定表单处理：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="formData.name" placeholder="姓名">
<input v-model="formData.email" placeholder="邮箱">
<button type="submit">提交</button>
</form>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const formData = reactive({
name: '',
email: ''
})
const handleSubmit = () => {
console.log('提交的数据:', formData)
}
return {
formData,
handleSubmit
}
}
}
</script>这些示例涵盖了 Vue 开发中的常见场景，可以根据实际需求进行调整和扩展。
