用vue实现的页面
Vue.js 页面实现方法
安装与初始化
确保已安装 Node.js 和 npm/yarn，通过 Vue CLI 创建项目：
npm install -g @vue/cli
vue create my-project选择默认配置或手动配置（如 Babel、Router、Vuex 等），完成后进入项目目录：
cd my-project
npm run serve组件结构
单文件组件（.vue）通常包含三部分：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>数据绑定
双向绑定使用 v-model：
<input v-model="inputText">
<p>{{ inputText }}</p>条件与循环
v-if 和 v-for 指令：
<div v-if="showElement">显示内容</div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>事件处理
通过 v-on 或 @ 简写绑定事件：
<button @click="handleClick">点击</button>路由配置
使用 vue-router 创建多页面应用：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', component: Home }
]
const router = createRouter({
history: createWebHistory(),
routes
})状态管理
Vuex 存储全局状态：
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})生命周期钩子
常用钩子如 mounted：
export default {
mounted() {
console.log('组件已挂载')
}
}组件通信
父子组件通过 props 和 emits：
<!-- 父组件 -->
<ChildComponent :propValue="value" @customEvent="handler"/>
<!-- 子组件 -->
<script>
export default {
props: ['propValue'],
emits: ['customEvent'],
methods: {
triggerEvent() {
this.$emit('customEvent', data)
}
}
}
</script>API 请求
使用 axios 发起 HTTP 请求：
import axios from 'axios'
export default {
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.data = response.data
})
}
}
}响应式样式
Scoped CSS 确保样式仅作用于当前组件：
<style scoped>
.button {
background: #42b983;
}
</style>构建与部署
生成生产环境代码：
npm run build部署生成的 dist 文件夹到 Web 服务器。
