网站时间轴51链
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
}
七、项目总结与扩展思路
学到了 Vue 的数据绑定、事件处理、生命周期函数
熟悉了 v-model 的双向绑定机制
掌握了 Element UI 表格与分页控件的基本用法
学会了通过 Axios 获取后端数据并绑定到视图
可扩展功能：
- 添加用户（表单弹窗）
- 编辑用户信息（双向绑定表单）
- 删除用户确认弹窗
- 多条件搜索过滤
- 使用组件化方式优化结构