当前位置：首页 > VUE

代码实现vue

2026-02-09 23:20:41VUE

Vue 基础代码实现

安装 Vue 的最新版本（以 Vue 3 为例）：

npm install vue@next

创建 Vue 实例

通过 CDN 引入 Vue 或使用构建工具（如 Vite、Webpack）初始化项目后，创建一个基础的 Vue 实例：

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

app.mount('#app')

模板语法

在 HTML 中绑定数据和方法：

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse</button>
</div>

对应的 JavaScript 部分：

const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

组件化开发

创建一个简单的组件并注册：

const Counter = {
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">+1</button>
    </div>
  `,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

const app = createApp({
  components: {
    Counter
  }
})

在模板中使用组件：

<div id="app">
  <Counter />
</div>

响应式状态管理

使用 reactive 或 ref 创建响应式数据：

import { reactive, ref } from 'vue'

const state = reactive({
  count: 0
})

const message = ref('Hello Vue 3')

生命周期钩子

在组件中添加生命周期钩子：

const app = createApp({
  mounted() {
    console.log('Component mounted')
  },
  beforeUnmount() {
    console.log('Component will be unmounted')
  }
})

路由配置（Vue Router）

安装 Vue Router：

npm install vue-router@4

基本路由配置示例：

import { createRouter, createWebHistory } from 'vue-router'

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

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

const app = createApp(App)
app.use(router)
app.mount('#app')

状态管理（Pinia/Vuex）

以 Pinia 为例的全局状态管理：

npm install pinia

创建和使用 store：

import { defineStore } from 'pinia'

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

在组件中使用：

import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
// 访问状态
console.log(counter.count)
// 调用action
counter.increment()

代码实现vue