当前位置：首页 > VUE

代码实现vue

2026-01-12 10:17:53VUE

安装Vue.js

通过npm或yarn安装Vue.js最新稳定版本。确保已安装Node.js环境。

npm install vue
# 或
yarn add vue

创建Vue实例

在HTML文件中引入Vue.js，通过new Vue()创建根实例，定义数据和方法。

<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 CLI创建的项目中，使用.vue单文件组件组织代码。每个组件包含模板、脚本和样式。

<template>
  <div class="example">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      msg: 'Hello from component!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

数据绑定与指令

Vue提供v-bind、v-model等指令实现动态数据绑定。v-bind用于属性绑定，v-model实现表单输入双向绑定。

<div id="app">
  <input v-model="inputText">
  <p v-bind:title="tooltip">{{ inputText }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      inputText: '',
      tooltip: 'This is a tooltip'
    }
  });
</script>

生命周期钩子

Vue组件提供created、mounted等生命周期钩子，用于在特定阶段执行逻辑。

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    fetch('/api/items')
      .then(res => res.json())
      .then(data => this.items = data);
  }
}

状态管理（Vuex）

大型应用可使用Vuex管理全局状态。定义store包含state、mutations、actions和getters。

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: {
    incrementAsync({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

路由配置（Vue Router）

使用Vue Router实现单页应用路由。定义路由表并挂载到Vue实例。

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

Vue.use(Router);

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

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

代码实现vue