Vue.js核心功能实现1. 数据绑定与响应式
Vue.js的核心特性之一是数据绑定。在我们的代码中，我们使用v-model实现了表单元素与Vue实例数据的双向绑定：
<input type="text" id="name" v-model="searchForm.name" placeholder="输入名字">
<select id="gender" v-model="searchForm.gender"><option value="">全部</option><option value="1">男</option><option value="0">女</option>
</select>对应的Vue实例数据：
data() {return {searchForm: {name: '',gender: '',job: ''},emplist: [],filteredEmployees: []};
}2. 条件渲染
我们使用了两种方式实现条件渲染：
-
v-if/v-else-if/v-else（注释掉的代码）：
<span v-if="e.job === 1">班主任</span>
<span v-else-if="e.job === 2">讲师</span>
<span v-else-if="e.job === 3">助理</span>
<span v-else>其他</span>-
v-show（实际使用的代码）：
<span v-show="e.job === 1">班主任</span>
<span v-show="e.job === 2">讲师</span>
<span v-show="e.job === 3">助理</span>
<span v-show="!(e.job === 1 || e.job === 2 || e.job === 3)">其他</span>两者的区别在于：
-
v-if是真正的条件渲染，元素会被完全添加或移除DOM -
v-show只是简单地切换CSS的display属性，元素始终存在于DOM中
3. 列表渲染
使用v-for指令动态生成表格行：
<tr v-for="(e, index) in filteredEmployees" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.age}}</td><td>{{e.gender === 1 ? '男' : '女'}}</td><td><img class="avatar" :src="e.avatar" :alt="e.name" width="50"></td><!-- 其他列 -->
</tr>注意:key的使用，它为每个节点提供唯一标识，帮助Vue高效地重新渲染列表。
4. 事件处理
搜索按钮使用了v-on:click（可以简写为@click）绑定点击事件：
<button type="button" v-on:click="filterEmployees">搜索</button>对应的Vue方法：
methods: {async filterEmployees() {try {const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.emplist = response.data.data;this.filteredEmployees = this.emplist;} catch (error) {console.error('Failed to fetch employees:', error);}}
}5. 生命周期钩子
使用mounted生命周期钩子在组件挂载后自动加载数据：
mounted() {// 初始化时加载所有员工信息this.filterEmployees();
}异步数据获取
我们使用axios库进行HTTP请求，并结合async/await语法处理异步操作：
async filterEmployees() {try {const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.emplist = response.data.data;this.filteredEmployees = this.emplist;} catch (error) {console.error('Failed to fetch employees:', error);}
}样式与布局
虽然CSS部分没有展示，但HTML中已经包含了一些基本的类名和结构，如avatar类用于头像图片的样式：
<img class="avatar" :src="e.avatar" :alt="e.name" width="50">可扩展功能
当前系统还有一些可以扩展的功能点：
-
实现删除和添加按钮的功能
-
添加分页功能
-
实现排序功能
-
添加编辑功能
-
优化移动端显示
总结
通过这个简单的项目，我们学习了Vue.js的多个核心概念：
-
数据绑定（v-model）
-
条件渲染（v-if/v-show）
-
列表渲染（v-for）
-
事件处理（v-on/@）
-
生命周期钩子（mounted）
-
异步操作（async/await）
这些概念是Vue.js开发的基础，掌握了它们，你就可以开始构建更复杂的Vue应用了。
完整的代码可以在文章开头的HTML文件中找到，你可以将其保存为HTML文件直接在浏览器中打开运行（需要联网以加载Vue和axios库）。
希望这篇博客对你学习Vue.js有所帮助！如果有任何问题或建议，欢迎在评论区留言讨论。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>人员信息表</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="app"><!-- 搜索表单区域 --><form id="search-form"><label for="name">名字：</label><input type="text" id="name" v-model="searchForm.name" placeholder="输入名字"><label for="gender">性别：</label><select id="gender" v-model="searchForm.gender"><option value="">全部</option><option value="1">男</option><option value="0">女</option></select><label for="job">职位：</label><select id="job" v-model="searchForm.job"><option value="">全部</option><option value="1">班主任</option><option value="2">讲师</option><option value="3">助理</option></select><button type="button" v-on:click="filterEmployees">搜索</button><!-- </form> // @click --><table><thead><!-- thead 表示表格中的表头 --><tr><!-- tr 表示表格中的行 ,一个tr就是一行--><!-- th 表示表格中的表头单元格,会加粗 --><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>头像</th><th>职位</th><th>操作</th></tr></thead><tbody><tr v-for="(e, index) in filteredEmployees" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.age}}</td><td>{{e.gender === 1 ? '男' : '女'}}</td><td><img class="avatar" :src="e.avatar" :alt="e.name" width="50"></td><td><!-- 修正 v-if、v-else-if 和 v-else 指令的使用 --><!-- <span v-if="e.job === 1">班主任</span><span v-else-if="e.job === 2">讲师</span><span v-else-if="e.job === 3">助理</span><span v-else>其他</span> --><!-- 使用 v-show 指令实现条件渲染 ，为true时显示,为false时隐藏,用在频繁切换的场景--><span v-show="e.job === 1">班主任</span><span v-show="e.job === 2">讲师</span><span v-show="e.job === 3">助理</span><span v-show="!(e.job === 1 || e.job === 2 || e.job === 3)">其他</span></td></td><td><!-- 这里删除按钮无法实现动态删除功能，仅作展示 --><button>删除</button><button>添加</button></td></tr></tbody></table></div><footer><p>北京大学</p><p>邮箱：pku@edu.cn 电话：010 - 12345678</p></footer><!-- 引入 Vue 3 库 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 引入 axios --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const { createApp } = Vue;createApp({data() {return {searchForm: {name: '',gender: '',job: ''}, emplist: [],filteredEmployees: []};},mounted() {//生命周期钩子函数，在组件挂载到 DOM 后执行。// 初始化时加载所有员工信息this.filterEmployees();},methods: {async filterEmployees() { //async函数用于定义异步函数，它返回一个Promise对象，表示异步操作的结果。try { //await关键字，用于等待一个异步操作完成，然后获取其结果。让异步变成同步const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.emplist = response.data.data;this.filteredEmployees = this.emplist;} catch (error) {console.error('Failed to fetch employees:', error);}}}}).mount('#app');</script>
</body></html>