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