Vue——邂逅Vue
Vue——Vue的基礎語法
 Vue——Vue的組件化
 Vue——slot_插槽的基本使用

文章目錄

1：插值操作

1.1 插值操作——Mustache語法

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

1.2 插值操作——其他指令

1.2.1 v-once

在某些情況下,我們可能不希望界面隨意的跟隨改變，這個時候,我們就可以使用一個Vue的指令v-once:
該指令後面不需要跟任何表達式(比如之前的v-for後面是要跟表達式的)
該指令表示元素和組件(組件後面纔會學習)只渲染一次,不會隨着數據的改變而改變。

<!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="demo">
			<h1>{{message}}</h1>
			<h1 v-once>{{message}}</h1>
			
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					message: "你好Vue",
				}
			}
			
			)
			
		</script>
	</body>
</html>

進行測試，有了v-once的標籤，不會隨着控制檯的修改而變化

1.2.2 v-html

某些情況下,我們從服務器請求到的數據本身就是一個HTML代碼
如果我們直接通過{{}}來輸出,會將HTML代碼也一起輸出。但是我們可能希望的是按照HTML格式進行解析,並且顯示對應的內容。如果我們希望解析出HTML展示可以使用v-html指令
該指令後面往往會跟上一個string類型，會將string的html解析出來並且進行渲染

<!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="demo">		
			<h1>{{url}}</h1>
			<h1 v-html="url">{{url}}</h1>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					message: "你好Vue",
					url: '<a href="www.baidu.com">百度</a>'
				}
			}
			
			)			
		</script>
	</body>
</html>

測試如下：利用v-html語法成功按照HTML格式進行解析,並且顯示對應的內容

2：v-bind——動態綁定

前面我們學習的指令主要作用是將值插入到我們模板的內容當中。但是,除了內容需要動態來決定外,某些屬性我們也希望動態來綁定。比如動態綁定a元素的href屬性，動態綁定img元素的src屬性
這個時候,我們可以使用v-bind指令:
v-bind指令
作用:動態綁定屬性
縮寫::
預期: any (with argument) | Object (without argument)
參數: attrOrProp (optional)

<!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="demo">
			<a :href="urls">百度網站</a>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {			
					urls: 'www.baidu.com'
				}
			}
			)
			
		</script>
	</body>
</html>

2.1 動態綁定class

例題：我們來通過設置一個按鈕，來讓字體的顏色可以通過按鈕的點擊發生變化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active{
				color: #FF0000;
			}
			.dev{
				font-size: large;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<h1 :class="{active: ifactive,dev: ifdev}">你好啊</h1>	
			<button v-on:click="click()">按鈕</button>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					url: 'https://blog.csdn.net/qq_44891295',	
					ifactive: 'true',
					ifdev: 'true'
				},
				methods: {
					click: function(){
						this.ifactive=!this.ifactive
					}
					
				}
			})
			
		</script>
	</body>
</html>

2.2 動態綁定style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active{
				color: #FF0000;
			}
			.dev{
				font-size: large;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<h1 :style="{fontSize: size+'px',color: color}">aa</h1>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					size: 70,
					color: 'red'
				}
	
			})
			
		</script>
	</body>
</html>

3：計算屬性

<!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="demo">
			<h1>{{first+" "+second}}</h1>
			<h1>{{first}} {{second}}</h1>
			<h1>{{fullname}}</h1>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					
					first: "hello",
					second: "world",
				},
				computed: {
					
					fullname(){
						
						return this.first+" "+this.second
					}
				}
			})
			
		</script>
	</body>
</html>

3.1 計算屬性複雜操作

測試把data數據中的price相加，把計算結果通過html顯示出來

<!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="demo">
			<h1>價格：{{sum}}</h1>
		</div>
		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
					
					data: [
						{id: 100,book: "abc",price: 100},
						{id: 101,book: "abc",price: 100},
						{id: 102,book: "abc",price: 100}											
					]
				},
				computed: {
					
					sum(){
						
						let sum=0
						for (let i=0;i<this.data.length;i++) {
							
							sum+=this.data[i].price;
						}
						return sum;
					}
				},
				
			})
			
		</script>
	</body>
</html>

2.2 setter和getter

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現在再運行 vm.fullName = ‘John Doe’ 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

2.3 計算屬性和方法的比較

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我們可以將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會重新求值。這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
這意味着下面的計算屬性將不再更新，因爲fullname() 不是響應式依賴：

computed: {
					
					fullname() {				
						// get: function(){
						// 	return this.first+" "+this.second						
						// }
						 	return this.first+" "+this.second
						
					}
}

相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。

我們爲什麼需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組並做大量的計算。然後我們可能有其他的計算屬性依賴於 A。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。

3：const

注意三：常量的含義是指向的對象不可以修改，但是可以改變對象內部的屬性
代碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>	
	</head>
	<body>
		<script>
			const object={	
				name: "zlj",
				age: 18,
			}
			object.name="vue";
			object.age=20;
	console.log(object.name,object.age);
			
		</script>
	</body>
</html>

測試結果：發現可以改變對象內部的屬性

如果加上如下代碼會報錯,因爲常量的含義是指向的對象不可以修改

			object={
				name: "zj",
				age: 1,
			}

4：v-on

示例：累加器

<!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="demo">
			<h1>{{counter}}</h1>
			<button v-on:click="add()">+</button>
			<button v-on:click="dec()">-</button>		
			//v-on的語法糖：（縮寫）
	//		<button @:click="add()">+</button>
	//		<button @:click="dec()">-</button>
		</div>

		<script>
			const demo=new Vue({
				
				el: "#demo",
				data: {
				    counter: 0,
				},
				methods: {
					
					add(){
						this.counter++;
					},
					dec(){
						this.counter--;
					}
				}
			})
			
		</script>
	</body>
</html>

示例

<!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="demo1">
			<h1>{{counter}}</h1>
			<button v-on:click="add()">+</button>
			<button v-on:click="dec()">-</button>	
			<button v-on:click="event()">無參數1</button>
			<button v-on:click="event">無參數2</button>
			<!--事件定義的時候，寫函數的時候省略了小括號，但是本身又要求有一個參數，這個時候，vue會默認
			將瀏覽器產生的event對象事件作爲參數，傳入到方法中
			-->
			<button v-on:click="event1()">單個參數</button>
			<!--方法定義的時候，我們需要event對象，同時又需要參數，
			在調用方法時，如何手動的獲取到瀏覽器參數的event對象：$event-->
			<button v-on:click="event2(12,$event)">多個參數</button>	
		</div>

		<script>
			const demo1=new Vue({
				
				el: "#demo1",
				data: {
				    counter: 0,
				},
				methods: {
					
					add(){
						this.counter++;
					},
					dec(){
						this.counter--;
						console.log(event);
					},
					event(){
						console.log(event);
					},
					event1(abc){
						console.log(abc+"....."+event);
						
					},
					event2(abc,event){
						console.log(abc+"....."+event);
						
					}
				}
			})		
		</script>
	</body>
</html>

示例

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

<!--1:.stop修飾符的使用-->
        <div v-on:click="event1()" id="demo3">
			<button v-on:click.stop="event2()">點擊</button>
		
		<br />
		<!--2:.prevent的使用-->
		<form action="baidu">
			<input type="submit" value="提交" v-on:click.prevent.stop="subclick()">
		</form>
		
		<!--3:監聽某個鍵盤的鍵帽-->
		<input type="text" v-on:click.keyup.stop="event3"/>
		</div>
		<script>
			
			const demo3=new Vue({
				
				el: "#demo3",
				data: {
				    counter: 0,
				},
				methods: {
					
					event1(){
						console.log("event1");
					},
					event2(){
						console.log("event2");
					},
					event3(){
						console.log("keyup");
					},
					subclick(){
						console.log("subclick..");						
					}
				}
			})
			
		</script>
	</body>
</html>

5：v-if，v-else-if，v-else的使用

切換登錄小案例，演示

<!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>
			<div id="demo">
				<span v-if="iftrue">
				<label for="id1">用戶郵箱</label>
				<input id="id1" type="text" placeholder="用戶郵箱" />
				</span>
				<span v-else>
				<label for="id1">用戶賬號</label>
				<input type="text" placeholder="用戶賬號" />
				</span>
				<button @click="iftrue=!iftrue">切換</button>
			</div>
		</div>
		<script>
			const demo=new Vue({
				
				el: '#demo',
				data: {
					iftrue: true,
				}
			})
			
		</script>
	</body>
</html>

解決方法：如下

			<div id="demo">
				<span v-if="iftrue">
				<label for="id1">用戶郵箱</label>
				<input id="id1" type="text" placeholder="用戶郵箱" key="用戶郵箱" />
				</span>
				<span v-else>
				<label for="id1">用戶賬號</label>
				<input type="text" placeholder="用戶賬號" key="用戶賬號" />
				</span>
				<button @click="iftrue=!iftrue">切換</button>
			</div>

6：v-show

案例演示

<!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="demo">
				<div>
				<h1 v-if="judge">{{message}}v-if</h1>
				<h1 v-show="judge">{{message}}v-show</h1>
				
			</div>
		</div>
		<script>
			const demo=new Vue({
				
				el: '#demo',
				data: {
					judge: true,
					message: "11"
				}
			})
			
		</script>
	</body>
</html>

7：數組中哪些方法是響應式的

演示如下

<!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="demo">
			<ul>
			<li v-for="item in datas">{{item}}</li>
            </ul>
			<button v-on:click="btnclick">點擊</button>

		</div>
		<script>
			const demo=new Vue({
				
				el: '#demo',
				data: {
					datas: ['1','2','3','4','5'],
				},
				methods: {
					btnclick(){
						//1:push方法
						//this.datas.push("aa");
						//2：通過索引值修改數組中的元素
					//	this.datas.pop();
		                //3：shift():刪除第一個元素
						//this.datas.shift();
						//4:unshift：添加第一個元素
					//	this.datas.unshift("aaa","aas");
						//5:splice
						this.datas.splice(1,2,"aaa")
						//6:reverse
						//this.datas.reverse()
						//注意：通過索引值來獲取值，不是響應式的,vue內部沒有監聽
						//this.datas[1]=3;
					}
				}
			})
			
		</script>
	</body>
</html>

8：v-moudle

代碼演示

<!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="demo">
			<input type="text" v-model="message" />
			{{message}}
		</div>
		
		<script>
			new Vue({
				el: '#demo',
				data: {
					message: '你好v-moudle',
				}
			})
		</script>
		
	</body>
</html>

演示如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>	
		<label><input type="checkbox" v-model="hobbies" value="籃球"/>籃球</label>
		<label><input type="checkbox" v-model="hobbies" value="足球"/>足球</label>
		<label><input type="checkbox" v-model="hobbies" value="球"/>球</label>
		<p>選中的愛好：{{hobbies}}</p>
		</div>
		<script>
			const a=new Vue({
				el: '#demo',
				data: {
					hobbies: []
				}
			})
		</script>
		
	</body>
</html>

Vue——Vue的基礎語法

文章目錄

1：插值操作

1.1 插值操作——Mustache語法

1.2 插值操作——其他指令

1.2.1 v-once

1.2.2 v-html

2：v-bind——動態綁定

2.1 動態綁定class

2.2 動態綁定style

3：計算屬性

3.1 計算屬性複雜操作

2.2 setter和getter

2.3 計算屬性和方法的比較

3：const

4：v-on

5：v-if，v-else-if，v-else的使用

6：v-show

7：數組中哪些方法是響應式的

8：v-moudle

【SQL進階】CASE語句的使用

npm error Cannot read properties of null (reading 'isDescendantOf')

SpringCloud——Nacos

SpringClound——Config——尚硅谷陽哥學習視頻筆記

SpringClound——Feign和OpenFeign區別和OpenFeign的使用

SpringClound——Hystrix斷路器

SpringClound——Gateway

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

linux以太網驅動總結