vue实现代码实例

以下是一个基于 Vue 3 的完整代码实例，包含核心功能实现和常见开发场景的示例：

基础组件示例

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
    <input v-model="inputText" placeholder="Type something..." />
    <p>Input value: {{ inputText }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = 'Vue 3 Example'
const count = ref(0)
const inputText = ref('')

const increment = () => {
  count.value++
}
</script>

<style scoped>
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

组件通信示例

父组件：

<template>
  <ChildComponent 
    :message="parentMessage" 
    @update-message="handleUpdate"
  />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('Hello from parent')

const handleUpdate = (newMessage) => {
  parentMessage.value = newMessage
}
</script>

子组件：

<template>
  <div>
    <p>Received: {{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script setup>
defineProps(['message'])
const emit = defineEmits(['update-message'])

const sendMessage = () => {
  emit('update-message', 'New message from child')
}
</script>

状态管理(Pinia)示例

store/counter.js:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

组件中使用：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'

const counter = useCounterStore()
</script>

路由示例

router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

导航组件：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

API请求示例

使用axios进行数据获取：

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    <ul>
      <li v-for="item in data" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const data = ref([])
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await axios.get('https://api.example.com/items')
    data.value = response.data
  } catch (error) {
    console.error('Error fetching data:', error)
  } finally {
    loading.value = false
  }
})
</script>

这些示例涵盖了Vue开发中的常见场景，包括组件基础、状态管理、路由和API交互等核心功能。实际开发中可根据项目需求进行组合和扩展。