当前位置：首页 > VUE

vue框架实现

2026-03-27 23:40:11VUE

Vue 框架实现步骤

安装 Vue.js

通过 npm 或 yarn 安装 Vue.js：

npm install vue

或

yarn add vue

创建 Vue 实例

在 HTML 文件中引入 Vue.js，并创建 Vue 实例：

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

组件化开发

使用 Vue 组件化开发，创建一个简单的组件：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})

数据绑定

Vue 提供双向数据绑定，通过 v-model 实现：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

条件渲染

使用 v-if 或 v-show 实现条件渲染：

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>

列表渲染

通过 v-for 实现列表渲染：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>

事件处理

使用 v-on 或 @ 绑定事件：

<div id="app">
  <button @click="greet">Greet</button>
</div>

计算属性

通过计算属性处理复杂逻辑：

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

生命周期钩子

Vue 提供生命周期钩子函数，如 created、mounted 等：

new Vue({
  el: '#app',
  created: function () {
    console.log('Vue instance created')
  }
})

单文件组件

使用 .vue 单文件组件，结合 webpack 或 vite 构建工具：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
div {
  color: red;
}
</style>

Vue Router

集成 Vue Router 实现前端路由：

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

Vuex 状态管理

使用 Vuex 管理全局状态：

vue框架实现

npm install vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  store
}).$mount('#app')