当前位置：首页 > news >正文

Vue.js 从入门到实战：用户管理分页表格项目详解

news 来源：原创 2025/6/14 19:19:23

Vue.js 从入门到实战：用户管理分页表格项目详解

本文适合 Vue 初学者，带你从 Vue 基础语法开始，逐步深入到分页表格项目实战，手把手教你用 Vue + Element UI + Axios 打造一个可增删改查的用户管理界面。

一、什么是 Vue.js？

Vue.js 是一套构建用户界面的渐进式 JavaScript 框架，具有以下特点：

轻量级：仅关注视图层，体积小；
响应式：数据变动会自动更新视图；
易上手：语法简单、逻辑清晰；
组件化：适合构建大型单页应用（SPA）。

Vue 非常适合初学者入门前端框架，也是市面上广泛使用的三大主流框架之一（Vue、React、Angular）。

二、Vue 基础知识详解

1. Vue 实例

Vue 应用的核心就是 new Vue({...})，用来创建一个 Vue 实例：

new Vue({el: '#app', // Vue 实例挂载的元素data: {message: 'Hello Vue!'},methods: {sayHi() {alert(this.message)}}
})

所有绑定在页面上的内容（插值、事件、属性）都来源于 data 和 methods。

2. 数据绑定（单向绑定）

Vue 通过插值语法 {{ 变量名 }} 实现数据绑定。

<p>{{ message }}</p>

只要 message 在 data 中发生改变，页面内容会自动更新。

3. 事件绑定

使用 v-on 或简写 @ 来绑定事件：

<button @click="sayHi">点我提示</button>

绑定的事件定义在 methods 中，点击按钮时会调用 sayHi 方法。

三、Vue 的双向绑定（重点）

1. 什么是双向绑定？

双向绑定意味着：

数据变化会更新视图；
用户输入也能修改数据。

Vue 使用 v-model 指令实现这种双向绑定，尤其常用于表单元素中。

2. 基本用法

<input v-model="username" placeholder="请输入用户名">
<p>你输入的是：{{ username }}</p>
new Vue({el: '#app',data: {username: ''}
})

当你在输入框中输入时，username 的值自动更新；反之，username 变量变化也会同步更新输入框的内容。

3. 表单双向绑定适配列表

元素	说明	数据类型
`<input type="text">`	文本输入	`String`
`<textarea>`	多行输入	`String`
`<input type="checkbox">`	多选/布尔值	`Boolean/Array`
`<input type="radio">`	单选	`String`
`<select>`	下拉框	`String/Array`

4. 修饰符（Modifers）

修饰符	功能
`.lazy`	在 `change` 事件触发时更新数据（失焦后）
`.number`	将输入转为数字
`.trim`	自动去除首尾空格

示例：

<input v-model.lazy="name">
<input v-model.number="age">
<input v-model.trim="email">

四、项目实战：分页用户信息表格管理系统

我们使用 Vue + Element UI + Axios 实现一个从后端分页获取用户数据，并显示到前端表格的项目。

1. 引入依赖

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. HTML 页面结构

<div id="app"><el-table :data="array" border stripe><el-table-column fixed prop="id" label="ID" width="260" /><el-table-column prop="username" label="用户名" width="320" /><el-table-column prop="password" label="密码" width="320" /><el-table-column prop="role" label="角色" width="320" /><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="info" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button><el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button></template></el-table-column></el-table><el-paginationstyle="margin-top: 20px; float: right;"backgroundlayout="prev, pager, next":page-size="size":total="total":current-page.sync="page"@current-change="change"></el-pagination>
</div>

3. Vue 实例与分页请求逻辑

new Vue({el: '#app',data() {return {array: [],  // 表格数据page: 1,    // 当前页码size: 2,    // 每页显示条数total: 0    // 数据总数（后端返回）}},mounted() {this.loadData(this.page)},methods: {loadData(currentPage) {axios.get(`http://localhost:8080/account/list?page=${currentPage}&size=${this.size}`).then(resp => {this.array = resp.data.recordsthis.total = resp.data.totalthis.page = resp.data.currentthis.size = resp.data.size})},change(currentPage) {this.loadData(currentPage)},edit(row) {alert('修改用户：' + JSON.stringify(row))},del(row) {alert('删除用户：' + JSON.stringify(row))}}
})

五、分页功能详解

分页由 Element UI 的 <el-pagination> 实现，核心是监听 @current-change 事件，并传入当前页码，更新后重新调用后端接口。

<el-pagination:current-page.sync="page"@current-change="change":page-size="size":total="total"layout="prev, pager, next" />

六、后端接口格式说明（配合使用）

后端接口建议返回以下格式 JSON 数据：

{"records": [{ "id": 1, "username": "张三", "password": "123456", "role": "管理员" },{ "id": 2, "username": "李四", "password": "abcdef", "role": "普通用户" }],"total": 11,"current": 1,"size": 2
}