Vue入門配置、常用指令及Ajax、Axios示例詳解
更新時間：2026年05月09日 10:02:42 作者：lrsnq
Vue是一套用于構建用戶界面的漸進式JavaScript框架,與其它框架不同的是,Vue被設計為可以自底向上逐層應用,這篇文章主要介紹了Vue入門配置、常用指令及Ajax、Axios的相關資料,需要的朋友可以參考下
Vue3
Vue（讀音 /vju? /, 類似于 view），是一款用于構建用戶界面的漸進式的JavaScript框架（官方網站：https://cn.vuejs.org）。
為什么要有Vue:
- 傳統(tǒng)方式：需要手動獲取 DOM 元素，逐個更新內容
- Vue 方式：數(shù)據變化自動更新視圖
1、構建用戶界面
userList: [
{"id": 1, "name": "謝遜", "image": "1.jpg", "gender": 1, "job": "班主任"},
{"id": 2, "name": "韋一笑", "image": "2.jpg", "gender": 1, "job": "班主任"}
]
上面的這些原始數(shù)據，用戶是看不懂的。 而我們開發(fā)人員呢，可以使用Vue中提供的操作，將原始數(shù)據遍歷、解析出來，從而渲染呈現(xiàn)出用戶所能看懂的界面，如下所示：
2、漸進式
Vue是一個框架，也是一個生態(tài)
Vue中兩種常見的開發(fā)模式：
- 基于Vue提供的核心包，完成項目局部模塊的改造了。
- 基于Vue提供的核心包、插件進行工程化開發(fā)，也就是做整站開發(fā)。
3、框架
Vue快速入門
1、準備（標準通用必需）
1.1、準備一個html文件，并在其中引入Vue模塊 （參考官方文檔，復制過來即可）【注意：模塊化的js，引入時，需要設置 type=“module”】
1.2、 創(chuàng)建Vue程序的應用實例，控制視圖的元素
1.3、 準備元素（div），交給Vue控制
2、數(shù)據驅動視圖
2.1、準備數(shù)據。 在創(chuàng)建Vue應用實例的時候，傳入了一個js對象，在這個js對象中，我們要定義一個data方法，這個data方法的返回值就是Vue中的數(shù)據。
2.2、通過插值表達式渲染頁面。 插值表達式的寫法：{{…}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入門</title>
</head>
<body>
<!-- 1.3、準備元素div,被Vue控制 -->
<div id="app">
<!-- 2.2、通過插值表達式渲染頁面 -->
{{message}}
</div>
<script type="module">
// 1.1、導入Vue模塊
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 1.2、創(chuàng)建Vue實例
createApp({
//2.1、準備數(shù)據（有快捷創(chuàng)建方式）
data(){
return {
message: 'Hello Vue'
}
}
// 1.3、指定控制的區(qū)域為選擇器app的區(qū)域
}).mount('#app')
</script>
</body>
</html>
Vue常用指令
首先在return中定義原始的數(shù)組，屬于用戶看不懂的東西并且這個數(shù)組有個名字，然后在script中in這個名字表示要用Vue操作這個數(shù)組
v-for：
需求：員工列表數(shù)據渲染展示 。
v-for：
作用：列表渲染，遍歷容器的元素或者對象的屬性
語法：< tr v-for=“(item,index) in items” :key=“item.id”>{{item}}< /tr >
參數(shù)：
- items 為遍歷的數(shù)組
- item 為遍歷出來的元素
- index 為索引/下標，從0開始 ；可以省略，省略index語法： v-for = “item in items”
key：
- 作用：給元素添加的唯一標識，便于vue進行列表項的正確排序復用，提升渲染性能
- 推薦使用id作為key（唯一），不推薦使用index作為key（會變化，不對應）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能學習輔助系統(tǒng)</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;
}
/* 搜索表單區(qū)域 */
.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%;
}
/* 頁腳版權區(qū)域 */
.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智能學習輔助系統(tǒng)</h1>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a>
</div>
<!-- 搜索表單區(qū)域 -->
<form class="search-form" action="#" method="post">
<input type="text" name="name" placeholder="姓名" />
<select name="gender">
<option value="">性別</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="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="submit">查詢</button>
<button type="reset" class="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>
<td>{{ emp.job === '1' ? '班主任' : (emp.job === '2' ? '講師' : (emp.job === '3' ? '學工主管' : (emp.job === '4' ? '教研主管' : (emp.job === '5' ? '咨詢師' : '未知')))) }}</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>
<!-- 頁腳版權區(qū)域 -->
<footer class="footer">
<p class="company-name">江蘇傳智播客教育科技股份有限公司</p>
<p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList: [
{ "id": 1,
"name": "謝遜",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-07-30T14:59:38"
},
{
"id": 2,
"name": "韋一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2023-07-01T00:00:00"
},
{
"id": 3,
"name": "黛綺絲",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 2,
"job": "2",
"entrydate": "2021-06-01",
"updatetime": "2023-07-01T00:00:00"
}
]
}
}
}).mount('#container')
</script>
</div>
</body>
</html>
v-bind
v-bind
- 作用：動態(tài)為HTML標簽綁定屬性值，如設置href，src，style樣式等。
- 語法：v-bind:屬性名=“屬性值” < img v-bind:src=“item.image” width=“30px”>
- 簡化：:屬性名=“屬性值” < img :src=“item.image” width=“30px”>
- 注意：v-bind 所綁定的數(shù)據，必須在data中定義/或基于data中定義的數(shù)據而來。
v-if & v-show
作用：這兩類指令，都是用來控制元素的顯示與隱藏的
v-if：
- 語法：v-if=“表達式”，表達式值為 true，顯示；false，隱藏
- 原理：基于條件判斷，來控制創(chuàng)建或移除元素節(jié)點（條件渲染）
- 場景：要么顯示，要么不顯示，不頻繁切換的場景
- 其它：可以配合 v-else-if / v-else 進行鏈式調用條件判斷
v-show：
- 語法：v-show=“表達式”，表達式值為 true，顯示；false，隱藏
- 原理：基于CSS樣式display來控制顯示與隱藏
- 場景：頻繁切換顯示隱藏的場景
<!-- 基于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>
v-model
- 作用：在表單元素上使用，雙向數(shù)據綁定。可以方便的 獲取 或 設置 表單項數(shù)據
- 語法：v-model=“變量名”
- 這里的雙向數(shù)據綁定，是指 Vue中的數(shù)據變化，會影響視圖中的數(shù)據展示 。 視圖中的輸入的數(shù)據變化，也會影響Vue的數(shù)據模型 。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能學習輔助系統(tǒng)</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;
}
/* 搜索表單區(qū)域 */
.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%;
}
/* 頁腳版權區(qū)域 */
.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智能學習輔助系統(tǒng)</h1>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a>
</div>
<!-- 搜索表單區(qū)域 -->
<form class="search-form" action="#" method="post">
<input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
<select name="gender" v-model="searchEmp.gender">
<option value="">性別</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="job" v-model="searchEmp.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="submit">查詢</button>
<button type="reset" class="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" class="avatar"></td>
<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>
</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>
<!-- 頁腳版權區(qū)域 -->
<footer class="footer">
<p class="company-name">江蘇傳智播客教育科技股份有限公司</p>
<p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchEmp: {
name: '',
gender: '',
job: ''
},
empList: [
{ "id": 1,
"name": "謝遜",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-07-30T14:59:38"
},
{
"id": 2,
"name": "韋一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2023-07-01T00:00:00"
},
{
"id": 3,
"name": "黛綺絲",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 2,
"job": "2",
"entrydate": "2021-06-01",
"updatetime": "2023-07-01T00:00:00"
}
]
}
}
}).mount('#container')
</script>
</div>
</body>
</html>
v-on
作用：為html標簽綁定事件（添加時間監(jiān)聽）
語法：
- v-on:事件名=“方法名”
- 簡寫為 @事件名=“…”
- < input type=“button” value=“點我一下試試” v-on:click=“handle”>
- < input type=“button” value=“點我一下試試” @click=“handle”>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能學習輔助系統(tǒng)</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;
}
/* 搜索表單區(qū)域 */
.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%;
}
/* 頁腳版權區(qū)域 */
.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智能學習輔助系統(tǒng)</h1>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a>
</div>
<!-- 搜索表單區(qū)域 -->
<form class="search-form">
<input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
<select name="gender" v-model="searchEmp.gender">
<option value="">性別</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="job" v-model="searchEmp.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>
<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>
</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>
<!-- 頁腳版權區(qū)域 -->
<footer class="footer">
<p class="company-name">江蘇傳智播客教育科技股份有限公司</p>
<p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchEmp: {
name: '',
gender: '',
job: ''
},
empList: [
{ "id": 1,
"name": "謝遜",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-07-30T14:59:38"
},
{
"id": 2,
"name": "韋一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2023-07-01T00:00:00"
},
{
"id": 3,
"name": "黛綺絲",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 2,
"job": "2",
"entrydate": "2021-06-01",
"updatetime": "2023-07-01T00:00:00"
}
]
}
},
methods: {
search() {
console.log(this.searchEmp)
},
clear() {
this.searchEmp = {
name: '',
gender: '',
job: ''
}
}
}
}).mount('#container')
</script>
</div>
</body>
</html>
Ajax
Ajax: 全稱Asynchronous JavaScript And XML，異步的JavaScript和XML。其作用有如下2點：
1、與服務器進行數(shù)據交換：通過Ajax可以給服務器發(fā)送請求，并獲取服務器響應的數(shù)據。
2、異步交互：可以在不重新加載整個頁面的情況下，與服務器交換數(shù)據并更新部分網頁的技術，如：搜索聯(lián)想、用戶名是否可用的校驗等等。
同步與異步
Axios
使用原生的Ajax請求的代碼編寫起來比較繁瑣，更加簡單的發(fā)送Ajax請求的技術Axios對原生的AJAX進行封裝，簡化書寫。Axios官網是：https://www.axios-http.cn
1、引入Axios文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、點擊按鈕時，使用Axios發(fā)送請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios入門程序</title>
</head>
<body>
<button id="getData">GET</button>
<button id="postData">POST</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//GET請求
document.querySelector('#getData').onclick = function() {
//axios發(fā)起異步請求
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
method:'get'
}).then(function(res) {
console.log(res.data);//拿到服務器返回來的所有數(shù)據
}).catch(function(err) {
console.log(err);
})
}
//POST請求
document.querySelector('#postData').onclick = function() {
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
method:'post'
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
}
</script>
</body>
</html>
注意：在使用axios時，在axios之后，輸入 thenc 會自動生成成功及失敗回調函數(shù)結構 。
將get請求代碼改寫成如下：
axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
console.log(result.data);
})
post請求改寫成如下：
axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => {
console.log(result.data);
})
案例-異步獲取數(shù)據
需求：基于axios動態(tài)加載員工列表數(shù)據
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能學習輔助系統(tǒng)</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;
}
/* 搜索表單區(qū)域 */
.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%;
}
/* 頁腳版權區(qū)域 */
.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智能學習輔助系統(tǒng)</h1>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登錄</a>
</div>
<!-- 搜索表單區(qū)域 -->
<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>
<!-- 頁腳版權區(qū)域 -->
<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發(fā)送異步請求，請求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: ''
}
}
}
}).mount('#container')
</script>
</div>
</body>
</html>
如果使用axios中提供的.then(function(){…}).catch(function(){…})，這種回調函數(shù)的寫法，會使得代碼的可讀性和維護性變差。 而為了解決這個問題，我們可以使用兩個關鍵字，分別是：async、await。
可以通過async、await可以讓異步變?yōu)橥讲僮?。async就是來聲明一個異步方法，await是用來等待異步任務執(zhí)行。
代碼修改前：
search() {
//基于axios發(fā)送異步請求，請求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
})
},
代碼修改后：
async search() {
//基于axios發(fā)送異步請求，請求https://web-server.itheima.net/emps/list，根據條件查詢員工列表
const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
this.empList = result.data.data;
},
總結
到此這篇關于Vue入門配置、常用指令及Ajax、Axios的文章就介紹到這了,更多相關Vue、Ajax、Axios詳解內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
ElementUI中el-input無法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產生是因為input在vue中的受控,我們需要去重新改變一下監(jiān)聽和實現(xiàn),需要的朋友可以參考下2023-11-11
本篇文章主要介紹了詳解vue父子模版嵌套案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實例的數(shù)據綁定到呈現(xiàn)的 DOM 上，這篇文章主要介紹了Vue3?中的模板語法,需要的朋友可以參考下2023-03-03
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項目時，代碼提示出現(xiàn)很多奇奇怪怪的錯誤提示，百度了一下是eslintrc.js文件沒有配置相關命令，ESlint的語法檢測真的令人抓狂，現(xiàn)在總結一下這些命令的解釋2020-02-02
這篇文章主要為大家詳細介紹了Vue編寫炫酷的時鐘插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
最近小編遇到這樣的問題，多組關鍵詞，這里實現(xiàn)了關鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2019-07-07
這篇文章主要為大家詳細介紹了vue手寫加載動畫項目，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
VUE指令是什么,VUE自定義指令又是什么,下面就和大家分享一下個人對它們的理解2019-02-02
這篇文章主要為大家介紹了VUE render函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌的效果（開箱即用）,實現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動位置顯示不同數(shù)字，本文通過實例代碼講解，需要的朋友可以參考下2019-12-12