Vue入門——常用指令與結合axios網絡請求

0.前言

本身是專注於後端的，稍微接觸一下Vue是爲了後面自己能做一點前後端分離的小項目。前端JS框架選擇接觸Vue僅僅是因爲它入門很簡單，看了一下午就大致瞭解基本操作(晚上回顧一下，寫篇筆記)。使用什麼編譯器…我個寫後端的其實不在乎。專業的用vscode和webstorm居多，我業餘，用的是hbuliderx…

最好的參考資料當然是官方文檔…有中文版的。

我自己是看視頻速成的：4個小時帶你快速入門vue這標題就很速成…開倍速＋跳過某些片段，零零散散最多2小時，視頻內容很基礎,只講了vue入門的東西，適合小白(比如我)快速入門看。我是自己跟着敲了一遍，有點理解了，記錄一下，下次就直接看自己筆記和代碼就好了。

1.hello Vue

按照國際慣例，先來個hello world。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
         <!-- 1.導入 vue.js(開發版)-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 2.html -->
		<div id="app">
			hello,{{ message }}!
		</div>
		<script>
			// 3.創建Vue實例
			var app = new Vue({
				el: "#app",
				data: {
					message: "world",
				}
			})
		</script>
	</body>
</html>

運行效果：

導入開發版本的Vue.js
創建Vue實例對象，設置el屬性和data屬性
使用模板語法把數據渲染到頁面上

第二步中的兩個屬性：

el:設置vue實例對象掛載點（設置作用域，內部均可）選擇器建議id選擇器類class/div選擇器
data:基礎類型/複雜類型對象/數組遵循js語法

還可設置methods屬性：定義一些js方法

2. 常用的Vue指令

之列了9個常用指令，本身不止這點，這九個分三類：

內容綁定，事件綁定 v-text v-html v-on
顯示切換，屬性綁定 v-show v-if v-bind
列表循環，表單元素綁定 v-for v-on v-model

2.1 v-text 設置文本標籤內容(textContent)

默認寫法會替換全部內容，使用插值表達式 {{ }} 可以替換指定內容，支持寫表達式

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			hello,{{ message }}!
			<!-- 1.1 v-text 設置文本標籤內容(textContent) -->
			<h5 v-text="data2">被替換的內容</h5>
			<h5 v-text="data3">被替換的內容</h5>
			<h5>{{data4+' 字符串拼接 '}}張三</h5>
		</div>
		<script>
			// 3.創建Vue實例
			var app = new Vue({
				el: "#app",
				data: {
					message: "world",
					data2:"測試Vue指令 v-text",
					data3:"測試Vue指令 v-text 2",
					data4:"李四",
				}
			})
		</script>
	</body>
</html>

結果：

2.2 v-html 設置標籤內部HTML

設置innnerHTML 渲染內部HTML結構的文本，若爲普通的文本則和v-text使用方法一致

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			hello,{{ message }}!
			<!-- 1.2 v-html 設置標籤HTML -->
			<p v-html="content"></p>
			<p v-text="content"></p>

		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message: "world",
					content:"<a href='http://www.baidu.com'>Vue v-html指令</a>",
				}
			})
		</script>
	</body>
</html>

結果：點擊上邊那個有v-html的標籤便跳轉百度首頁了。

2.3 v-on 爲元素綁定事件

點擊 <input type="button" value="事件綁定" v-on:click="方法" >
移入 <input type="button" value="事件綁定" v-on:monseenter="方法" >
雙擊 <input type="button" value="事件綁定" v-on:dblclick="方法" >
...其他事件

方法內部通過this獲取data中的數據

簡寫：v-on:click等價於@click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			hello,{{ message }}!
			<!-- 1.3 v-on 爲元素綁定事件：點擊/移入/雙擊等 v-on:click等價於@click -->
			<input type="button" value="v-on 事件綁定 點擊" v-on:click="doMethod1">
			<input type="button" value="v-on 事件綁定2簡寫  點擊" @click="doMethod1">
			<input type="button" value="v-on 事件綁定3  雙擊" @dblclick="doMethod1">

		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message: "world",
				},
				methods: {
					doMethod1: function() {
						alert("執行方法1")
					},
				}
			})
		</script>
	</body>
</html>

效果：彈窗如圖所示

2.4 v-show 選擇顯示（操作樣式）

常用於廣告/遮罩層，選擇顯示標記的標籤樣式，支持表達式。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<!-- 2.1 v-show  -->
			<img src="https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截圖20200308155222.jpg" v-show="isShow"> 
			<img src="https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截圖20200308155222.jpg" v-show="age>=20">
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					age: 20,
					isShow: true,
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

效果：根據isShow的值和age>=20的結果顯示圖片：例子中age爲20，isShow爲true，所以兩張圖都顯示。若修改爲age爲18，isShow爲flase則都不顯示

2.5 v-if 選擇顯示（操作dom元素）

v-if 指令是根據表達式真假，切換元素的顯示和隱藏（操作dom元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 2.2 v-if 根據isShow布爾變量的值選擇顯示-->
						<p v-if="isShow">v-if指令測試 根據布爾變量 isShow爲true才顯示此信息</p>
						<p v-if="age>18">v-if指令測試2 根據表達式 age>18才顯示此信息 </p>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					age: 17,
					isShow: true,
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

效果：由於age: 17,isShow: true,所以只會顯示上面那條文本

2.6 v-bind 設置元素屬性

v-bind指令用於設置元素屬性，如src title class
完整寫法 v-bind:屬性名
簡寫：只保留 :屬性名
需要動態的增刪class建議使用對象的方式：
例子中有舉例:class="{active:isActive}" active class是否生效看isActive變量的值

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active {
				border: 4px solid blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgsrc" v-bind:title="imgtitle+'~~'" />
			<!-- 第二種寫法 簡寫 更常用 -->
			<img :src="imgsrc" :title="imgtitle+'~~'" />

			<!--  -->
			<img :src="imgsrc" :title="imgtitle+'~~'" :class="{active:isActive}" />
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					isActive:true,
					imgtitle:"圖片名稱",
					imgsrc: "https://gitee.com/lipiaoMKX/blogimage/raw/master/img/TIM截圖20200308155222.jpg",
				},
				methods: {

				}
			})
		</script>
	</body>
</html>

效果：三張圖，第三張圖加了class屬性，鼠標放上面都有圖片名稱~~

2.7 v-for 根據數據(數組)生成列表結構

v-for指令根據數據(數組)生成列表結構，且數組長度會更新同步到頁面上，爲響應式佈局，裏面可結合其他指令如:title=“item.name”

例子有普通數組和對象數組：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<!-- 3.1 v-for -->
			<ul>
				<li v-for="item in arr">
					arr數組中的值:{{ item }}
				</li>
			</ul>

			<!-- 索引 ul無序 ol有序-->
			<ol>
				<li v-for="(it,index) in arr">
					arr數組第{{index+1}}個的值:{{ it }}
				</li>
			</ol>

			<!-- 對象數組 -->
			<ul>
				<li v-for="item in studentObjArr" :title="item.name">
					studentObjArr對象數組中的值:姓名:{{ item.name }} 序號:{{item.id}}
				</li>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					arr:[1,2,3],
					studentObjArr:[
						{name:"張三",id:"123"},
						{name:"李四",id:"233"},
						{name:"王五",id:"345"},
					],

				},
				methods: {

				}
			})
		</script>
	</body>
</html>

效果：

2.8 v-on 傳遞自定義參數，事件修飾符

事件綁定的方法寫成函數調用的形式，可傳入自定義參數

定義的方法需要定義形參來接受傳入的實參

事件後面跟上 .修飾符可對事件進行限制，例如.enter爲限制爲回車執行事件修飾符有很多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<!-- v-on -->
			<input value="點擊 v-on:click" type="button" v-on:click="dosth('hello',233)" />
			<!-- 簡寫 -->
			<input value="點擊2 @click " type="button" @click="dosth('hello',2)" />

			<!-- 同理 回車 v-on:keyup.enter 簡寫@keyup.enter-->
			<input  type="text" @keyup.enter="sayHi" placeholder="測試@keyup.enter" />
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
				},
				methods: {
					dosth: function(x1, x2) {
						alert(x1 + x2)
					},
					sayHi: function() {
						alert("你好!")
					},
				}
			})
		</script>
	</body>
</html>

效果：點擊第一個按鈕彈出hello233，點擊第二個按鈕彈出hello2，在輸入框那兒回車彈出你好，在下個v-model指令的例子中實現根據輸入框的內容彈出指定的內容。

2.9 v-model 獲取和設置表單元素的值(雙向數據綁定)

v-model指令用於獲取和設置表單元素的值，表單數據和vue中data中的數據兩者的值是雙向數據綁定，即修改任意一個的數據另一個都會同步修改。（數組/對象都一樣）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<!-- v-model -->
			<input v-model="message" type="text" @keyup.enter="sayHi" placeholder="測試@keyup.enter" />
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message:"",
				},
				methods: {
					sayHi: function() {
						alert("你好!"+this.message)
					},
				}
			})
		</script>
	</body>
</html>

效果：輸入文本後回車，彈出你好+輸入的內容。

3.Vue結合網絡請求庫Axios

網絡請求庫Axios Github

上邊這Axios的Github首頁有使用方法，這裏結合Vue實現天氣查詢

3.1 導入Axios的js文件

	   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.2 以 ul標籤無序列表顯示天氣數據

<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 測試天氣接口 -->
		<div id="weatherapp">
			<input type="text" v-model="city"  placeholder="輸入city" @keyup.enter="searchWeather" />
			<h5>v-model屬性的數據：{{city}}</h5>
			<button @click="searchWeather">查天氣</button>
			<ul>
				<li v-for="item in weatherList">
					{{item.date}} {{item.type}} {{item.low}} {{item.high}}
				</li>
			</ul>
		</div>
		
		<!-- 自己的js -->
		<script src="./js/main.js"></script>
	</body>
</html>

3.3 操作網絡請求邏輯的JS

var app=new Vue({
	el:"#weatherapp",
	data:{
		city:"",
		weatherList:[],
		},
	methods:{
		searchWeather:function(response){
			var that=this;
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
			.then(function(response){
				console.log(response.data);//調試：控制檯輸出 全部
				console.log(response.data.data.forecast);////調試：控制檯輸出 數據的預報部分
				that.weatherList=response.data.data.forecast;
			}),function(err){
				alert(err)
			}
		}
	}
})

3.4 運行效果

在輸入框輸入城市名稱，點擊查天氣按鈕或者回車便可，下面那個v-model屬性的數據：實時顯示了city屬性，印證了v-model雙向數據綁定。

Vue入門——常用指令與結合axios網絡請求

Vue入門——常用指令與結合axios網絡請求

0.前言

1.hello Vue

2. 常用的Vue指令

2.1 v-text 設置文本標籤內容(textContent)

2.2 v-html 設置標籤內部HTML

2.3 v-on 爲元素綁定事件

2.4 v-show 選擇顯示（操作樣式）

2.5 v-if 選擇顯示（操作dom元素）

2.6 v-bind 設置元素屬性

2.7 v-for 根據數據(數組)生成列表結構

2.8 v-on 傳遞自定義參數，事件修飾符

2.9 v-model 獲取和設置表單元素的值(雙向數據綁定)

3.Vue結合網絡請求庫Axios

3.1 導入Axios的js文件

3.2 以 ul標籤無序列表顯示天氣數據

3.3 操作網絡請求邏輯的JS

3.4 運行效果

SQL優化-20231016

Docker——安裝MySQL

SpringBoot任務——JSoup+定時任務定時爬取微博熱搜至數據庫

Vue入門——開源項目vue-element-admin本地運行

Vue入門——常用指令與結合axios網絡請求

SpringBoot Kotlin@Autowired註解DAO層mapper出錯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結