当前位置：首页 > VUE

vue实现页面功能

2026-01-18 17:36:03VUE

Vue 实现页面功能的常见方法

组件化开发

使用 Vue 的单文件组件（.vue 文件）将页面拆分为可复用的模块。每个组件包含模板（HTML）、脚本（JavaScript）和样式（CSS）三部分。

<template>
  <div class="example-component">
    <p>{{ message }}</p>
    <button @click="changeMessage">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!'
    }
  }
}
</script>

<style scoped>
.example-component {
  color: blue;
}
</style>

路由配置

通过 Vue Router 实现页面导航和路由管理，创建单页应用（SPA）。

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

状态管理

使用 Vuex 管理全局状态，适用于多个组件共享数据的场景。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

API 调用

使用 axios 或其他 HTTP 客户端与后端 API 交互。

import axios from 'axios'

export default {
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

生命周期钩子

利用 Vue 的生命周期钩子在特定阶段执行代码。

export default {
  created() {
    // 组件实例创建后调用
  },
  mounted() {
    // DOM 挂载后调用
  },
  beforeDestroy() {
    // 组件销毁前调用
  }
}

表单处理

使用 v-model 实现表单数据的双向绑定。

<template>
  <div>
    <input v-model="inputText" placeholder="输入文本">
    <p>输入的内容：{{ inputText }}</p>
  </div>
</template>

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

条件渲染

使用 v-if、v-else 和 v-show 控制元素的显示和隐藏。

<template>
  <div>
    <p v-if="show">显示内容</p>
    <p v-else>其他内容</p>
    <button @click="toggleShow">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    }
  }
}
</script>

列表渲染

使用 v-for 渲染列表数据。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

自定义指令

创建自定义指令扩展 Vue 的功能。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

<template>
  <input v-focus>
</template>

混入（Mixins）

使用混入复用组件逻辑。

const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('Hello from mixin!')
    }
  }
}

export default {
  mixins: [myMixin]
}

插件开发

开发 Vue 插件扩展 Vue 的功能。

const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myMethod = function () {
      console.log('Plugin method called')
    }
  }
}

Vue.use(MyPlugin)

vue实现页面功能