当前位置：首页 > VUE

vue实现页面

2026-03-07 16:09:50VUE

Vue 实现页面的基本方法

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是实现页面的核心方法：

安装 Vue.js
通过 CDN 引入或使用 npm/yarn 安装：

npm install vue

创建 Vue 实例
在 HTML 中定义挂载点，并通过 JavaScript 初始化 Vue：

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

使用单文件组件 (SFC)

对于复杂页面，推荐使用 .vue 单文件组件：

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

<script>
export default {
  data() {
    return { msg: 'Hello from SFC!' }
  }
}
</script>

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

路由配置

使用 Vue Router 实现多页面导航：

安装路由库：
```
npm install vue-router
```

定义路由配置：


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

Vue.use(Router)

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


### 状态管理

对于全局状态，使用 Vuex：  
1. 安装 Vuex：  
```bash
npm install vuex

创建 store：


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

Vue.use(Vuex)

export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } })


### 生命周期钩子

利用生命周期方法控制页面行为：  
```javascript
export default {
  created() {
    console.log('组件已创建')
  },
  mounted() {
    console.log('DOM 已挂载')
  }
}

响应式数据绑定

通过 v-model 实现双向绑定：

<input v-model="message">
<p>输入的内容是：{{ message }}</p>

条件渲染

使用 v-if 和 v-show 控制显示：

<div v-if="isVisible">条件显示内容</div>
<div v-show="isActive">总是渲染但切换显示</div>

列表渲染

通过 v-for 渲染数组：

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

事件处理

使用 v-on 绑定事件：

<button @click="handleClick">点击</button>

methods: {
  handleClick() {
    alert('按钮被点击')
  }
}

组件通信

父子组件通过 props 和 events 交互：

<!-- 父组件 -->
<child-component :title="parentTitle" @update="handleUpdate"/>

// 子组件
export default {
  props: ['title'],
  methods: {
    emitEvent() {
      this.$emit('update', newValue)
    }
  }
}

样式绑定

动态绑定 class 和 style：

<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>

表单处理

处理表单输入和验证：

<form @submit.prevent="submitForm">
  <input v-model="form.email" type="email" required>
  <button type="submit">提交</button>
</form>

API 请求

使用 axios 进行 HTTP 请求：

vue实现页面

npm install axios

import axios from 'axios'

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