当前位置：首页 > VUE

实现vue

2026-01-12 08:51:08VUE

Vue.js 基本实现步骤

安装 Vue.js 通过 npm 或 yarn 安装 Vue.js：

npm install vue
# 或
yarn add vue

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

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

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

组件化开发

单文件组件创建 .vue 文件，包含模板、脚本和样式：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Component'
    }
  }
}
</script>

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

注册全局组件

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

数据绑定

双向数据绑定使用 v-model 指令实现表单输入和应用状态的双向绑定：

<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

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

条件渲染

v-if 指令根据条件显示或隐藏元素：

<template>
  <div v-if="seen">Now you see me</div>
</template>

<script>
export default {
  data() {
    return {
      seen: true
    }
  }
}
</script>

列表渲染

v-for 指令渲染数组或对象的项目列表：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Learn Vue' },
        { id: 2, text: 'Build something awesome' }
      ]
    }
  }
}
</script>

事件处理

v-on 指令监听 DOM 事件并运行方法：

<template>
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button has been clicked {{ counter }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>

计算属性

计算缓存基于响应式依赖进行缓存的计算属性：

<template>
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</template>

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

生命周期钩子

常用钩子函数在组件生命周期的不同阶段执行代码：

<script>
export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted to DOM')
  },
  updated() {
    console.log('Component updated')
  },
  destroyed() {
    console.log('Component destroyed')
  }
}
</script>

Vue CLI 项目搭建

创建新项目使用 Vue CLI 快速搭建项目结构：

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

Vue Router

基本路由配置设置路由并创建路由视图：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

Vuex 状态管理

Store 创建集中式存储管理应用的所有组件状态：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

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

实现vue