vue实现页面各种案例
Vue 实现页面常见案例
动态表单生成
使用 v-for 和 v-model 动态渲染表单字段，适合问卷或配置类场景。通过数据驱动表单结构，字段类型可扩展为输入框、下拉框等。
<template>
<div v-for="(field, index) in formFields" :key="index">
<label>{{ field.label }}</label>
<input
v-model="field.value"
:type="field.type"
:placeholder="field.placeholder">
</div>
</template>
<script>
export default {
data() {
return {
formFields: [
{ label: '用户名', type: 'text', value: '', placeholder: '输入姓名' },
{ label: '年龄', type: 'number', value: '', placeholder: '输入年龄' }
]
}
}
}
</script>路由懒加载
通过动态导入拆分代码块，提升首屏加载速度。适用于多页面的 SPA 应用。
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue') // 按需加载
}
]状态管理（Vuex）
集中管理全局状态，适合跨组件共享数据。包含 state、mutations、actions 和 getters 的完整流程。
// store.js
export default new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) { state.count++ }
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => commit('increment'), 1000)
}
}
})自定义指令
实现 DOM 操作逻辑复用，例如自动聚焦输入框。
// main.js
Vue.directive('focus', {
inserted: (el) => el.focus()
})
// 使用方式
<input v-focus>组件通信
通过 $emit 和 props 实现父子组件数据传递，或使用 provide/inject 跨层级传递。
<!-- 父组件 -->
<child-component :message="parentMsg" @update="handleUpdate"/>
<!-- 子组件 -->
<script>
export default {
props: ['message'],
methods: {
notifyParent() {
this.$emit('update', newValue)
}
}
}
</script>动画过渡
使用 <transition> 包裹元素，结合 CSS 或 JavaScript 钩子实现动画效果。
<transition name="fade">
<p v-if="show">渐变显示的内容</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>服务端渲染（SSR）
通过 nuxt.js 或手动配置实现 SEO 优化。需区分客户端和服务器端的生命周期钩子。
// nuxt.config.js
export default {
modules: ['@nuxtjs/axios'],
axios: { baseURL: 'https://api.example.com' }
}权限控制
结合路由守卫实现页面访问权限校验，支持角色动态验证。
router.beforeEach((to, from, next) => {
const hasPermission = checkUserRole(to.meta.requiredRole)
hasPermission ? next() : next('/login')
})图表集成
使用 echarts 或 chart.js 封装可复用的图表组件，通过 watch 响应数据变化。
// 封装 ECharts 组件
export default {
mounted() {
this.initChart()
},
watch: {
chartData: 'updateChart'
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
}
}
}国际化
通过 vue-i18n 实现多语言切换，支持动态加载语言包。
// i18n.js
const messages = {
en: { welcome: 'Welcome' },
zh: { welcome: '欢迎' }
}
const i18n = new VueI18n({ locale: 'en', messages })
