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

JavaWeb前端04（Vue生命周期，钩子函数）

news 2025/8/23 6:23:35

前言

一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻🤪），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好😗可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上。

学习了HTML、CSS，Javascript，Ajax的基础内容，来看看Vue的生命周期，也就是前面提到的钩子函数🙌🙌🙌。

来看看什么是Vue生命周期，什么是钩子函数？

vue的生命周期：指的是vue对象从创建到销毁的过程，每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

在这里插入图片描述
来看看案例吧：

页面显示之后，通过钩子函数立刻返回数据，呈现在页面上，就是在methods函数后面加上，mounted钩子函数

mounted() {this.search();
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tlias智能学习辅助系统</title><style>body {margin: 0;}/* 顶栏样式 */.header {display: flex;justify-content: space-between;align-items: center;background-color: #c2c0c0;padding: 20px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 加大加粗标题 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本链接样式 */.header a {text-decoration: none;color: #333;font-size: 16px;}/* 搜索表单区域 */.search-form {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;}/* 表单控件样式 */.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 10px 10px;border: 1px solid #ccc;border-radius: 4px;width: 26%;}/* 按钮样式 */.search-form button {padding: 10px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}/* 清空按钮样式 */.search-form button.clear {background-color: #6c757d;}.table {min-width: 100%; border-collapse: collapse;}/* 设置表格单元格边框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }/* 页脚版权区域 */.footer {background-color: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}#container {width: 80%;margin: 0 auto;}</style>
</head>
<body><div id="container"><!-- 顶栏 --><div class="header"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form"><input type="text" name="name" placeholder="姓名" v-model="searchForm.name" /><select name="gender" v-model="searchForm.gender"><option value="">性别</option><option value="1">男</option><option value="2">女</option></select><select name="job" v-model="searchForm.job"><option value="">职位</option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="button" @click="search">查询</button><button type="button" @click="clear">清空</button></form><table class="table table-striped table-bordered"><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr v-for="(emp, index) in empList" :key="index"><td>{{ emp.name }}</td><td>{{ emp.gender === 1 ? '男' : '女' }}</td><td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td><!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 --><td><span v-if="emp.job == '1'">班主任</span><span v-else-if="emp.job == '2'">讲师</span><span v-else-if="emp.job == '3'">学工主管</span><span v-else-if="emp.job == '4'">教研主管</span><span v-else-if="emp.job == '5'">咨询师</span><span v-else>其他</span></td><!-- 基于v-show指令来展示职位这一列 --><!-- <td><span v-show="emp.job === '1'">班主任</span><span v-show="emp.job === '2'">讲师</span><span v-show="emp.job === '3'">学工主管</span><span v-show="emp.job === '4'">教研主管</span><span v-show="emp.job === '5'">咨询师</span></td> --><td>{{ emp.entrydate }}</td><td>{{ emp.updatetime }}</td><td class="btn-group"><button class="edit">编辑</button><button class="delete">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p class="company-name">江苏传智播客教育科技股份有限公司</p><p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p></footer><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchForm: {name: '',gender: '',job: ''},empList: []}},methods: {search() {//基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {this.empList = res.data.data})},clear() {this.searchForm= {name: '',gender: '',job: ''}}},mounted() {this.search();}}).mount('#container')</script></div></body>
</html>