3.4-Web前段开发-Vue3（AI)
Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/）Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/）框架：就是一套完整的项目解决方案，用于快速构建项目。优点：大大提升前端项目的开发效率。缺点：需要理解记忆框架的使用规则。（参照官网）
目录
什么是Vue
Vue是一款用于构建用户界面的渐进式的JavaScript框架。 （官方：https://cn.vuejs.org/）
Vue是一款用于构建用户界面的渐进式的JavaScript框架。 （官方：https://cn.vuejs.org/）
框架：就是一套完整的项目解决方案，用于快速构建项目 。
优点：大大提升前端项目的开发效率 。
缺点：需要理解记忆框架的使用规则 。（参照官网）
Vue 快速入门
准备
引入Vue模块（官方提供）
创建Vue程序的应用实例，控制视图的元素
准备元素(div)，被Vue控制
数据驱动视图
准备数据
通过插值表达式渲染页面
Vue 常用指令
指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
常用指令：
|
指令 |
作用 |
|
v-for |
列表渲染，遍历容器的元素或者对象的属性 |
|
v-bind |
为HTML标签绑定属性值，如设置 href , css样式等 |
|
v-if/v-else-if/v-else |
条件性的渲染某元素，判定为true时渲染,否则不渲染 |
|
v-show |
根据条件展示某元素，区别在于切换的是display属性的值 |
|
v-model |
在表单元素上创建双向数据绑定 |
|
v-on |
为HTML标签绑定事件 |
v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法：
参数说明：
items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for="item in items
key：
作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
v-for指令
作用：列表渲染，遍历容器的元素
语法：<h1 v-for="(item,index) in items" :key="item.id">
注意：想让哪个标签遍历展示多次，指令就加在哪个标签上
v-bind
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值"
简化：:属性名="属性值"
<img v-bind:src="item.image" width="30px">
<img :src="item.image" width="30px">
v-bind指令
场景：动态为标签属性绑定值(插值表达式，不能在标签内使用)
语法：v-bind:属性="变量" / :属性="变量"
v-if & v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
v-show
语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景
v-if 与 v-show 的作用?
根据条件判断,是否展示某元素
v-if 与 v-show 的区别?
v-if: 条件不成立,直接不渲染这个元素 (不频繁切换的场景)
v-show: 通过css样式,来控制元素的展示与隐藏 (频繁切换的场景)
v-model
v-on
v-model指令
作用：表单元素上进行双向数据绑定， 用于获取或设置表单项数据
注意：v-model="变量", 变量必须在data中声明
v-on指令
作用: 事件绑定
语法: v-on:click="..." / @click="..."
<!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: {
async 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
// })
let res=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: ''
}
this.search()
}
},
mounted() {//钩子函数
this.search()
},
}).mount('#container')
</script>
</div>
</body>
</html>Ajax
介绍：Asynchronous JavaScript And XML， 的JavaScript和XML①。
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步
Axios
介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/
步骤：
引入Axios的js文件（参照官网）
使用Axios发送请求，并获取响应结果
Axios-请求方式别名
Axios发送异步请求
GET:
axios.get(url).then((res)=>{…}).catch((err)=>{…})
POST:
axios.post(url).then((res)=>{…}).catch((err)=>{…})
async & await
Vue生命周期
生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
</head>
<body>
<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">
<script src="js/axios.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
console.log(result);
}).catch((err) => {
console.error(err);
});
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/list','id=1').then((result)=> {
console.log(result);
}).catch((err) => {
console.error(err);
});
})
</script>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
27
0- 0
已为社区贡献2条内容
所有评论(0)