当前位置：首页 > VUE

vue怎么实现显示页面

2026-01-22 01:02:09VUE

Vue 实现页面显示的基本方法

使用 Vue.js 显示页面主要涉及组件化开发、路由配置和模板渲染。以下是核心实现方式：

创建 Vue 实例并挂载到 DOM

new Vue({
  el: '#app',
  template: '<div>页面内容</div>'
})

单文件组件方式（推荐）

<template>
  <div class="page-container">
    {{ message }}
    <child-component/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      message: '页面内容'
    }
  }
}
</script>

<style scoped>
.page-container {
  font-size: 16px;
}
</style>

使用 Vue Router 控制页面显示

基础路由配置

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

路由视图占位符

<div id="app">
  <router-view></router-view>
</div>

动态内容显示技巧

条件渲染

<template>
  <div>
    <h1 v-if="showTitle">页面标题</h1>
    <p v-show="isVisible">动态显示内容</p>
  </div>
</template>

列表渲染

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

状态管理配合显示

Vuex 状态绑定

<template>
  <div>{{ $store.state.pageContent }}</div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch('fetchPageData')
  }
}
</script>

生命周期控制显示

export default {
  data() {
    return {
      isLoading: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const res = await api.getPageData()
        this.pageData = res.data
      } finally {
        this.isLoading = false
      }
    }
  }
}

响应式布局实现

使用 CSS 媒体查询

<style scoped>
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
</style>

响应式数据绑定

<template>
  <div :class="{'mobile-layout': isMobile}">
    自适应内容
  </div>
</template>

<script>
export default {
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  }
}
</script>

以上方法涵盖了 Vue 实现页面显示的主要技术点，可根据实际需求组合使用。组件化开发是 Vue 的核心思想，合理组织组件结构能使页面显示更易维护。

vue怎么实现显示页面