当前位置：首页 > VUE

vue实现的页面

2026-03-28 11:36:38VUE

Vue.js 页面实现方法

使用 Vue.js 实现页面需要遵循组件化开发模式，结合模板、脚本和样式三部分。以下是一个基础实现框架：

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

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

或

npm install vue@next

基础页面结构

创建单文件组件（.vue）结构：

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue页面示例'
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击');
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

路由配置

使用 vue-router 实现多页面导航：

vue实现的页面

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

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

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

状态管理

集成 Vuex 进行全局状态管理：

import { createStore } from 'vuex'

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

组件通信

父子组件通信示例：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate"/>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="$emit('update', newValue)">更新</button>
  </div>
</template>

生命周期使用

常用生命周期钩子示例：

vue实现的页面

export default {
  created() {
    // 组件实例创建后调用
  },
  mounted() {
    // DOM挂载完成后调用
  },
  updated() {
    // 数据更新导致DOM重新渲染后调用
  },
  unmounted() {
    // 组件卸载后调用
  }
}

API 请求

使用 axios 进行数据请求：

import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/posts')
      this.posts = response.data
    } catch (error) {
      console.error('请求失败:', error)
    }
  }
}

响应式样式

使用 CSS 预处理器和 scoped 样式：

<style lang="scss" scoped>
$primary-color: #42b983;

.button {
  background-color: $primary-color;
  &:hover {
    opacity: 0.8;
  }
}
</style>

表单处理

双向数据绑定示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" placeholder="用户名">
    <input v-model="formData.password" type="password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData)
    }
  }
}
</script>