vue实现代码

Vue 代码实现示例

以下是一个基础的 Vue 组件实现示例，展示如何创建和使用 Vue 组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Click me</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Vue 3 Composition API 示例

Vue 3 引入了 Composition API，提供更灵活的代码组织方式：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Click me</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

const message = ref('Hello Vue 3!')
const count = ref(0)

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

Vue 路由配置示例

以下是一个基本的路由配置示例：

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

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

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

export default router

Vuex 状态管理示例

Vuex 是 Vue 的状态管理库：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

Vue 组件通信示例

父子组件通信：

// 父组件
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Message from parent'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    notifyParent() {
      this.$emit('update', 'New message from child')
    }
  }
}
</script>

这些示例涵盖了 Vue 开发中的常见场景，包括组件创建、状态管理、路由配置和组件通信。