好看的网页千篇一律，有趣的代码万里挑一。
Vue案例：课程管理系统。
这个案例十分经典，如何把数据写活?看完之后，你就有答案了。
这是一个简易的课程管理系统，截图为其中一个界面，可以对课程进行查找、修改与添加。
代码如下：
<body>
<div id="app">
<div class="search">
<span>课程名称(模糊查询)：</span>
<input type="text" v-model="searchText">
<button @click="loadSubject">搜索</button>
</div>
<table>
<thead>
<tr>
<th>课程编号</th>
<th>课程名称</th>
<th>课时</th>
<th>年级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in subjects" :key="index">
<td>{{item.SubjectId}}</td>
<td>{{item.SubjectName}}</td>
<td>{{item.ClassHour}}</td>
<td>{{item.Grade.GradeName}}</td>
<td>
<button @click="getSubjectById(item.SubjectId)">修改</button>
<button @click="deleteSubjectById(item.SubjectId)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<button @click="pageIndex=1" :disabled="pageIndex===1">首页</button>
<button @click="pageIndex--" :disabled="pageIndex===1">上一页</button>
<span>{{pageIndex}}</span>
<span>/</span>
<span>{{totalPage}}</span>
<button @click="pageIndex++" :disabled="pageIndex===totalPage">下一页</button>
<button @click="pageIndex=totalPage" :disabled="pageIndex===totalPage">尾页</button>
</td>
</tr>
</tfoot>
</table>
<hr>
<table class="edit">
<tr>
<td>课程名称：</td>
<td><input type="text" v-model="subject.subjectName"></td>
</tr>
<tr>
<td>课时：</td>
<td><input type="text" v-model.number="subject.classHour"></td>
</tr>
<tr>
<td>年级：</td>
<td>
<select v-model="subject.gradeId">
<option value="0">请选择年级</option>
<option v-for="(item,index) in grades" :value="item.GradeId">{{item.GradeName}}</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button v-if="subject.subjectId" @click="updateSubject">修改</button>
<button v-else @click="addSubject">添加</button>
<button @click="clear">取消</button>
</td>
</tr>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src='https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js'></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
//数据
data:{
//总数量
count:0,
//当前页码
pageIndex:1,
//每页数量
pageSize:5,
//搜索内容
searchText:'',
//课程数组
subjects:[],
//年级数组
grades:[],
//课程对象
subject:{
subjectName:'',
classHour:0,
gradeId:0
}
},
//方法
methods: {
//加载数据的方法
async loadSubject(){
//发生请求，获取课程数据
let {data:{data,count}} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{
params:{
pageIndex:this.pageIndex,
pageSize:this.pageSize,
subjectName:this.searchText
}
})
//将获取到的数据，传给当前Vue实例管理
this.subjects = data
this.count = count
},
//加载年级的方法
async loadGrade(){
let {data} = await axios.get('http://www.bingjs.com:81/Grade/GetAll')
this.grades = data
},
//添加课程的方法
async addSubject(){
//解构出课程对象的三个属性
let {subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Add',{
subjectName,
classHour,
gradeId
})
if(data){
alert('添加成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
this.clear()
}
},
//根据课程编号，查询一个课程信息
async getSubjectById(subjectId){
let {data} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectById',{
params:{
subjectId
}
})
// 获取课程信息
let {SubjectName:subjectName,ClassHour:classHour,GradeId:gradeId} = data
// 更新可定对象的信息
this.subject = {
subjectId,
subjectName,
classHour,
gradeId
}
},
//修改课程的方法
async updateSubject(){
//从课程对象里面解构出课程的相关信息
let {subjectId,subjectName,classHour,gradeId} = this.subject
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Update',{
subjectId,
subjectName,
classHour,
gradeId
})
if(data){
alert('修改成功！')
//调用加载课程信息的方法
this.loadSubject()
//调用清空表单数据的方法
this.clear()
}
},
//删除课程的方法
async deleteSubjectById(subjectId){
if(!confirm('是否确定删除')) return
let {data} = await axios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
if(data){
alert('删除成功！')
//调用加载课程信息的方法
this.loadSubject()
}
},
//清空表单数据的方法
clear(){
this.subject = {
subjectName:'',
classHour:0,
gradeId:0
}
}
},
//计算属性
computed:{
//总页数
totalPage(){
return Math.ceil(this.count/this.pageSize)
}
},
//监听器
watch:{
//监听当前页码是否发生变化
pageIndex(){
this.loadSubject()
}
},
//创建完成的生命周期-此时可操作数据了
created() {
//调用加载课程信息的方法
this.loadSubject()
//调用加载年级信息的方法
this.loadGrade()
},
})
</script>
</body>
代码中的{{ }}就是把数据写活的地方，从后端拿到数据，渲染到页面，使用插值表达式替换数据，这是核心部分。
样式自定义，这里就没有贴出来。
跟着敲一敲吧
