结合前面讲解的 Vue 基本结构，以你提供的这个诗人信息管理代码为例，编写一份面向初学者的详细说明文档。
如果vue相关知识遗忘了，可以看视频复习。
Vue.js 入门实战详解 ------ 诗人信息管理页面
一、整体结构概览
这是一个基于 Vue 2 的诗人信息编辑页面，主要功能是：
- 从 URL 获取诗人 ID
- 根据 ID 查询诗人详细信息并显示在表单中
- 修改信息后点击"更新"按钮保存
二、HTML 结构解析（View 层）
1. 完整的 HTML 骨架
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>诗人信息编辑</title>
<!-- 引入 Vue 核心库 -->
<script src="./js/vue.js"></script>
<!-- 引入 Axios（用于发送 HTTP 请求） -->
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<!-- View 层：Vue 挂载的容器 -->
<div id="app" align="center">
<!-- 表格：展示诗人信息表单 -->
<table border="1">
<!-- ... 表单内容 ... -->
</table>
<!-- 显示当前诗人数据的 JSON 格式 -->
{{peot}}
</div>
</body>
<!-- Vue 实例（ViewModel） -->
<script>
// ... Vue 代码 ...
</script>
</html>2. 表单中的 v-model 双向绑定
html
<tr>
<td>编号</td>
<td>
<!-- v-model 实现双向数据绑定 -->
<input type="text" v-model="this.id">
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" v-model="peot.author">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<!-- 单选框：绑定同一个数据字段 -->
<input type="radio" name="gender" v-model="peot.gender" value="1"> 男
<input type="radio" name="gender" v-model="peot.gender" value="0"> 女
</td>
</tr>v-model 原理解析
v-model 是 Vue 提供的双向数据绑定指令，它本质上是语法糖：
┌─────────────────────────────────────────────┐
│ v-model 工作原理 │
│ │
│ 用户输入 ──→ 更新 data ──→ 自动更新视图 │
│ ↑ ↓ │
│ └────────────────────────┘ │
│ 双向绑定（自动同步） │
└─────────────────────────────────────────────┘对于输入框：
html
<!-- 这行代码 -->
<input v-model="peot.author">
<!-- 等价于 -->
<input
:value="peot.author" <!-- 单向绑定：数据 → 视图 -->
@input="peot.author = $event.target.value" <!-- 事件监听：视图 → 数据 -->
>对于单选框：
html
<!-- 当 peot.gender = '1' 时，"男" 被选中 -->
<input type="radio" v-model="peot.gender" value="1"> 男
<!-- 当 peot.gender = '0' 时，"女" 被选中 -->
<input type="radio" v-model="peot.gender" value="0"> 女3. @click 事件绑定
html
<input type="button" @click="updatePeot" value="更新">@click是v-on:click的简写- 点击按钮时，会调用 Vue 实例中的
updatePeot方法 - 原理：Vue 通过事件监听，在用户点击时执行对应的 JavaScript 逻辑
4. 插值表达式 {``{peot}}
html
{{peot}}{``{ }}是 Vue 的插值语法（Mustache 语法）- 将
data中的peot对象转换为 JSON 字符串并显示在页面上 - 当
peot数据变化时，这里会自动更新
三、Vue 实例解析（ViewModel 层）
1. 创建 Vue 实例
javascript
new Vue({
el: '#app', // 挂载点：Vue 控制 id="app" 的容器
data: { // 响应式数据
id: '',
peot: {}, // 存储诗人详情（初始为空对象）
},
methods: { // 方法定义
selectById() { /* ... */ },
updatePeot() { /* ... */ }
},
created() { // 生命周期钩子
// 页面加载时自动执行
}
})2. data ------ 响应式数据
javascript
data: {
id: '', // 存储从 URL 获取的诗人 ID
peot: {}, // 存储诗人详情对象
}响应式原理：
- 当
this.peot被赋值后，页面中所有使用{``{peot}}或v-model="peot.xxx"的地方都会自动更新 - 这是通过 Vue 的数据劫持（Object.defineProperty）实现的
javascript
// 当执行这行代码时
this.peot = { author: '李白', dynasty: '唐' }
// Vue 会：
// 1. 更新内存中的数据
// 2. 通知所有依赖这个数据的地方
// 3. 自动重新渲染 DOM3. methods ------ 业务逻辑方法
(1) selectById() ------ 查询诗人详情
javascript
selectById() {
// 构造请求 URL（使用模板字符串）
var url = `peots/${this.id}`
// 发送 GET 请求
axios.get(url)
.then(response => {
var baseResult = response.data
if (baseResult.code == 1) {
// 请求成功，将数据赋值给 peot
this.peot = baseResult.data
// 此时，表单中的所有 v-model 会自动显示数据
}
})
.catch(error => {
// 错误处理
})
}关键点解释：
| 代码 | 说明 |
|---|---|
this.id |
访问 data 中的 id 数据 |
peots/${this.id} |
ES6 模板字符串，${} 中可嵌入表达式 |
axios.get(url) |
发送异步 GET 请求 |
.then(response => {}) |
请求成功的回调（箭头函数） |
this.peot = baseResult.data |
更新数据，触发视图更新 |
为什么使用箭头函数？
javascript
// 箭头函数（推荐）
.then(response => {
this.peot = response.data // this 指向 Vue 实例
})
// 普通函数（不推荐）
.then(function(response) {
this.peot = response.data // this 指向 window，会报错！
})(2) updatePeot() ------ 更新诗人信息
javascript
updatePeot() {
var url = 'peotupdate'
// 发送 POST 请求，将 peot 对象作为请求体
axios.post(url, this.peot)
.then(res => {
var baseResult = res.data
if (baseResult.code == 1) {
// 更新成功，跳转到列表页
location.href = 'peot_listAll.html'
} else {
// 更新失败，弹出提示
alert(baseResult.message)
}
})
.catch(err => {
console.error(err)
})
}数据流：
用户在表单修改 → v-model 更新 this.peot → 点击"更新" →
调用 updatePeot() → axios.post 发送数据 →
后端处理 → 返回结果 → 跳转或提示4. created() ------ 生命周期钩子
javascript
created() {
// 1. 从 URL 中提取 id 参数
this.id = location.href.split("?id=")[1]
// 例如：http://xxx.com/peot_edit.html?id=5
// 提取后：this.id = "5"
// 2. 调用方法，查询诗人详情
this.selectById()
}执行时机：
- Vue 实例创建完成后自动执行
- 此时
data和methods已经初始化完成 - 适合做数据初始化
完整流程：
页面加载
↓
new Vue() 创建实例
↓
初始化 data、methods
↓
created() 自动执行 ← 这里获取 id 并查询数据
↓
axios 发送异步请求
↓
数据返回，更新 this.peot
↓
视图自动更新（表单显示数据）四、完整数据流图解
┌─────────────────────────────────────────────────────────────┐
│ 完整数据流 │
│ │
│ 1. 页面加载 │
│ ↓ │
│ 2. created() 执行 │
│ ├── this.id = location.href.split("?id=")[1] │
│ └── this.selectById() │
│ ↓ │
│ 3. axios.get(`peots/${this.id}`) │
│ ↓ │
│ 4. 后端返回数据 │
│ ↓ │
│ 5. this.peot = response.data │
│ ↓ │
│ 6. 视图自动更新 │
│ ├── 表单输入框显示数据（v-model） │
│ └── {{peot}} 显示 JSON 数据 │
│ │
│ 7. 用户修改表单 │
│ ↓ │
│ 8. v-model 自动更新 this.peot │
│ ↓ │
│ 9. 点击"更新"按钮 │
│ ↓ │
│ 10. @click="updatePeot" │
│ ↓ │
│ 11. axios.post('peotupdate', this.peot) │
│ ↓ │
│ 12. 后端处理完成，跳转到列表页 │
└─────────────────────────────────────────────────────────────┘五、初学者常见问题
1. 为什么 peot 是空对象 {}？
- 因为初始时还没有数据，先定义空对象防止报错
- 等异步请求返回后，再赋值
2. 为什么 id 在 data 中定义，又通过 location.href 赋值？
data中的id是响应式的，方便在其他地方使用created中赋值是初始化过程
六、核心知识点总结
| 概念 | 说明 | 本例中的应用 |
|---|---|---|
| Vue 实例 | 应用的核心，连接数据和视图 | new Vue({...}) |
| el | 挂载点，指定 Vue 控制的范围 | el: '#app' |
| data | 响应式数据存储 | id、peot |
| methods | 定义业务方法 | selectById()、updatePeot() |
| 生命周期 | 实例不同阶段自动执行的函数 | created() |
| v-model | 双向数据绑定 | 表单输入与 peot 数据同步 |
| @click | 事件绑定 | @click="updatePeot" |
| {{}} | 插值表达式 | {``{peot}} 显示数据 |
| axios | 发送 HTTP 请求 | 查询和更新数据 |