当前位置：首页 > VUE

vue实现例子

2026-03-28 00:05:07VUE

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 router

Vue 状态管理示例

使用 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 表单处理示例

双向数据绑定表单处理：

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 开发中的常见场景，可以根据实际需求进行调整和扩展。