当前位置：首页 > VUE

vue 实现代码

2026-02-18 11:44:07VUE

vue 实现代码

以下是一个基础的 Vue.js 实现示例，包含组件化开发、数据绑定和事件处理等核心功能：

基础 Vue 实例

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

单文件组件示例

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
    <ChildComponent :message="childMessage"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: 'Vue Demo',
      count: 0,
      childMessage: 'Hello from parent'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, sans-serif;
  text-align: center;
}
</style>

子组件实现

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <p>{{ message }}</p>
    <p>Reversed: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Vue 3 Composition API 示例

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

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

<template>
  <button @click="increment">
    Count: {{ count }}, Double: {{ doubleCount }}
  </button>
</template>

路由配置示例

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

状态管理 (Vuex) 示例

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return api.login(credentials).then(user => {
        commit('setUser', user)
      })
    }
  }
})

以上代码展示了 Vue 2.x 和 Vue 3 的核心用法，包括组件通信、状态管理和路由配置等常见场景。实际开发中可根据项目需求选择合适的 API 风格和架构模式。

vue 实现代码