vue基礎

第一個vue程序

導入開發版本的vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
創建vue實例對象，設置el屬性和data屬性
使用簡潔的模板語法把數據渲染到頁面上

el掛載點

vue的作用範圍是什麼？vue會管理el選項命中元素及其內部的後代元素
是否可以使用其他的選擇器？可以使用，但是建議使用ID選擇器
是否可以設置其他的dom元素？可以使用其他的雙標籤，不能使用HTML和body
el的作用是什麼？用來設置vue實例掛載（管理）的元素

data：數據對象

vue用到的數據定義在data中
data中可以寫複雜類型（如：對象，元組）的數據
渲染複雜類型數據時，遵守JS的語法即可（如：對象點語法，數組索引語法）

vue本地應用

v-text指令

vue指令指以v-開頭特殊的語法
v-text指令的作用是：設置標籤的內容（textCotent）
默認寫法會替換全部內容，使用差值表達式{ { } }可以替換指定內容
內部支持寫表達式

代碼示例

<div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2 v-text="info"></h2>
	<h2>{{message+'!'}}</h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑馬程序員",
			info:"前端"
		},
	})
</script>

v-html指令

v-html指令的作用是：設置元素的innerHTML
內容中有HTML結構會被解析爲標籤
v-text指令無論內容是什麼，只會解析爲文本

代碼示例

<div id="app">
	<h2 v-text="content"></h2>
	<h2 v-html="content"></h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			content:"<a href='http://www.itheima.com'>黑馬程序員</a>"
		},
	})
</script>

v-on指令

v-on指令的作用是：爲元素綁定事件
事件名不需要寫on
指令可以簡寫爲@
綁定的方法定義在methods屬性中

代碼示例

<div id="app">
	<input type="button" value="v-on指令" v-on:click="doIt">
	<input type="button" value="v-on簡寫" @click="doIt">
	<h2 @click="changeFood">{{food}}</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			food:"西藍花"
		},
		methods:{
			doIt:function(){
				alert('doit');
			},
			changeFood:function(){
				console.log(this.food);
				this.food+="好好喫"
			}
		},
	})
</script>

計數器

思路

data中定義數據：比如num
methods中添加兩個方法：比如add，sub
使用v-text將num設置給span標籤
使用v-on將add，sub分別綁定給+，-按鈕
累加的邏輯：小於10累加，否則提示
遞減的邏輯：大於0遞減，否則提示
代碼示例

<div id="app">
	<div class="input-num">
		<button type="button" @click="sub">-</button>
		<span>{ { num } }</span>
		<button type="button" @click="add">+</button>
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			add:function(){
				if(this.num<10){
					this.num++;
				}else{
					alert("別點了最大了")
				}
			},
			sub:function(){
				if(this.num>0){
					this.num--;
				}else{
					alert("別點了最小了")
				}
			}
		},
	})
</script>

創建vue示例時：el(掛載點),data(數據),methods(方法)
v-on指令的作用是綁定事件,簡寫爲@
方法中通過this關鍵字獲取data中的數據
v-text指令的作用是:設置元素的文本值,簡寫爲{ { } }

v-show指令

v-show指令的作用是:根據真假切換元素的顯示狀態
原理是修改元素的display,實現顯示隱藏
指令後面的內容,最終都會解析爲布爾值
值爲true元素顯示,值爲false元素隱藏
數據改變之後,對應元素的顯示狀態會同步更新

代碼示例

<div id="app">
	<input type="button" value="切換顯示狀態" @click="changeIsShow"/>
	<input type="button" value="累加年齡" @click="addAge"/>
	<img src="img/logo.png" v-show="isShow">
	<img src="img/logo.png" v-show="age>=18">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			age:17
		},
		methods:{
			changeIsShow:function(){
				this.isShow = !this.isShow
			},
			addAge:function(){
				this.age++;
			}
		},
	})
</script>

v-if指令

v-if指令的作用是:根據表達式的真假切換元素的顯示狀態
本質是通過操縱dom元素來切換顯示狀態
表達式的值爲true,元素存在於dom樹中,爲false,從dom樹中移除
頻繁的切換用v-show,反之使用v-if,前者的切換消耗小

代碼示例

<div id="app">
	<input type="button" value="切換顯示" @click="toggleIsShow"/>
	<p v-if="isShow">黑馬程序員</p>
	<p v-show="isShow">黑馬程序員show</p>
	<h2 v-if="temperature>=35">熱死了</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			temperature:40
		},
		methods:{
			toggleIsShow:function(){
				this.isShow = !this.isShow;
			}
		},
	})
</script>

v-bind指令

v-bind指令的作用是:爲元素綁定屬性
完整寫法是v-bind:屬性名
簡寫的話可以直接省略v-bind,只保留:屬性名
需要動態的增刪class建議使用對象的方式

代碼示例

<style type="text/css">
	.active{
		border: 1px solid red;
	}
</style>
<div id="app">
	<img v-bind:src="imgSrc">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			imgSrc:"http://www.itheima.com/images/logo.png",
			imgTitle:"黑馬程序員",
			isActive:false
		},
		methods:{
			toggleActive:function(){
				this.isActive=!this.isActive;
			}
		},
	})
</script>

圖片切換

定義圖片數組
添加圖片索引
v-bind綁定src屬性
v-on圖片切換邏輯
v-show顯示狀態切換

v-for指令

v-for指令的作用是:根據數據生成列表結構
數組經常和v-for結合使用
語法是(item,index) in 數據
item和index可以結合其他指令一起使用
數組長度的更新會同步到頁面上，是響應式的

代碼示例

<div id="app">
	<input type="button" value="添加數據" @click="add"/>
	<input type="button" value="移除數據" @click="remove"/>
	<ul>
		<li v-for="(item,index) in arr">{ { index+1 } }黑馬:{ { item } }</li>
	</ul>
	<h2 v-for="item in vegetabes" v-bind:title="item.name">
		{ { item.name } }
	</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			arr:['北京','上海','廣州','深圳'],
			vegetabes:[
				{name:"西藍花"},
				{name:"炒蛋"}
			]
		},
		methods:{
			add:function(){
				this.vegetabes.push({name:"花菜"});
			},
			remove:function(){
				this.vegetabes.shift();
			}
		},
	})
</script>

v-on補充

事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法時需要定義形參來接收傳入的實參
事件的後面跟上.修飾符可以對事件進行限制
.enter可以限制觸發的按鍵爲回車
事件修飾符有多種

代碼示例

<div id="app">
	<input type="button" value="點擊" @click="doIt(666,'老鐵')"/>
	<input type="text" @keyup.enter="sayHi"/>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		methods:{
			doIt:function(p1,p2){
				console.log("doit");
				console.log(p1);
				console.log(p2);
			},
			sayHi:function(){
				alert("吃了嗎");
			}
		},
	})
</script>

v-model指令

v-model指令的作用是便捷的設置和獲取表單元素的值
綁定的數據會和表單元素值相關聯
綁定的數據–表單元素的值

代碼示例

<div id="app">
	<input type="button" value="修改message" @click="setM" />
	<input type="text" v-model="message" @keyup.enter="getM"/>
	<h2>{ { message } }</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑馬"
		},
		methods:{
			getM:function(){
				alert(this.message);
			},
			setM:function(){
				this.message="酷丁魚"
			}
		},
	})
</script>

axios使用

使用條件

導入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>,就可以發送請求了

兩種請求方式

get方法
- 語法格式:axios.get("地址?key=value&key2=value2").then(function(response){},function(err){})
- then後是兩個回調函數,第一個在向服務器請求完成後觸發,第二個回調函數在請求失敗的時候觸發,他們的形參可以獲取服務器的響應內容或錯誤信息
- 查詢字符串的格式是key=value&key2=value2,key是接口文檔提供的,value是要具體傳輸的數據
post方法
- 語法格式:axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
- 不同之處:數據以對象的形式寫在post的第二個參數,格式{key:value,key2:value2}

代碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<input type="button" value="get請求" class="get">
		<input type="button" value="post請求" class="post">
		
		<script type="text/javascript">
			document.querySelector(".get").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3")
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
			document.querySelector(".post").onclick = function(){
				axios.post("https://autumnfish.cn/api/user/reg111",{username:"曹哈哈"})
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
		</script>
	</body>
</html>

網絡應用的核心

data數據的一部分內容是通過網絡上獲取到的

在方法中發送網絡請求,在響應回來之後把服務器返回的數據設置給data中對應的值

var app = new Vue({
	el:"#app",
	data:{
		joke:"笑話"
	},
	methods:{
		getJokes:function(){
			//this.joke
			axios.get("地址").then(function(response){
				//this.joke?
			},function(err){});
		}
	}
})

代碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="獲取笑話" @click="getJoke" />
			<p>{{ joke }}</p>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					joke:"很好笑的笑話"
				},
				methods:{
					getJoke:function(){
						// console.log(this.joke);
						var that = this;
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							// console.log(response)
							// console.log(response.data)
							// console.log(this.joke);
							that.joke = response.data;
						},function(err){})
					}
				},
			})
		</script>
	</body>
</html>

Vue基礎知識大全+小案例

vue基礎

第一個vue程序

el掛載點

data：數據對象

vue本地應用

v-text指令

v-html指令

v-on指令

計數器

v-show指令

v-if指令

v-bind指令

圖片切換

v-for指令

v-on補充

v-model指令

axios使用

使用條件

兩種請求方式

網絡應用的核心

SQL優化-20231016

生動理解Java面向對象

關係型數據庫和非關係型數據庫的區別與聯繫

JetBrains公司軟件版本控制

計算機英語常見縮寫總結

GitHub開源項目合作流程

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

linux以太網驅動總結