vue核心基礎點

来源:https://www.cnblogs.com/suncolor/archive/2022/11/10/16874820.html
-Advertisement-
Play Games

vue vue簡介 Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。 ...


vue

vue簡介

Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建，並提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是複雜的界面，Vue 都可以勝任。

vue的模版語法

模板語法包含插值語法和指令語法

點擊查看代碼 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板語法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
<!-- 
Vue模板語法有2大類：
	1.插值語法：
			功能：用於解析標簽體內容。
			寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。
	2.指令語法：
			功能：用於解析標簽（包括：標簽屬性、標簽體內容、綁定事件.....）。
			舉例：v-bind:href="xxx" 或  簡寫為 :href="xxx"，xxx同樣要寫js表達式，
						且可以直接讀取到data中的所有屬性。
			備註：Vue中有很多的指令，且形式都是：v-????，此處我們只是拿v-bind舉個例子。

-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h1>插值語法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令語法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">點我去{{school.name}}學習1</a>
			<a :href="school.url" x="hello">點我去{{school.name}}學習2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚矽谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

vue的數據綁定

v-bind和v-model兩種方式的數據綁定

<!-- 
Vue中有2種數據綁定的方式：
		1.單向綁定(v-bind)：數據只能從data流向頁面。
		2.雙向綁定(v-model)：數據不僅能從data流向頁面，還可以從頁面流向data。
			備註：
					1.雙向綁定一般都應用在表單類元素上（如：input、select等）
					2.v-model:value 可以簡寫為 v-model，因為v-model預設收集的就是value值。
-->

事例

<div id="root">
	<!-- 普通寫法 -->
	單向數據綁定：<input type="text" v-bind:value="name"><br/>
	雙向數據綁定：<input type="text" v-model:value="name"><br/>

	<!-- 簡寫 -->
	單向數據綁定：<input type="text" :value="name"><br/>
	雙向數據綁定：<input type="text" v-model="name"><br/>

	<!-- 如下代碼是錯誤的，因為v-model只能應用在表單類元素（輸入類元素）上 -->
	<h2 v-model:x="name">你好啊</h2>
</div>

el和data的兩種寫法

點擊查看代碼 
<!-- 
data與el的2種寫法
		1.el有2種寫法
						(1).new Vue時候配置el屬性。
						(2).先創建Vue實例，隨後再通過vm.$mount('#root')指定el的值。
		2.data有2種寫法
						(1).對象式
						(2).函數式
						如何選擇：目前哪種寫法都可以，以後學習到組件時，data必須使用函數式，否則會報錯。
		3.一個重要的原則：
						由Vue管理的函數，一定不要寫箭頭函數，一旦寫了箭頭函數，this就不再是Vue實例了。
-->
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		//el的兩種寫法
		/* const v = new Vue({
			//el:'#root', //第一種寫法
			data:{
				name:'尚矽谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二種寫法 */

		//data的兩種寫法
		new Vue({
			el:'#root',
			//data的第一種寫法：對象式
			/* data:{
				name:'尚矽谷'
			} */

			//data的第二種寫法：函數式
			data(){
				console.log('@@@',this) //此處的this是Vue實例對象
				return{
					name:'尚矽谷'
				}
			}
		})
	</script>

MVVM模型

  1. M：模型(Model) ：對應 data 中的數據
  2. V：視圖(View) ：模板
  3. VM：視圖模型(ViewModel) ： Vue 實例對象
觀察發現：
	1.data中所有的屬性，最後都出現在了vm身上。
	2.vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用。

image

vue事件處理

放在標簽上，點擊觸發事件@click

點擊查看代碼 
		<!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名；
							2.事件的回調需要配置在methods對象中，最終會在vm上；
							3.methods中配置的函數，不要用箭頭函數！否則this就不是vm了；
							4.methods中配置的函數，都是被Vue所管理的函數，this的指向是vm 或 組件實例對象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參；
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>歡迎來到{{name}}學習</h2>
			<!-- <button v-on:click="showInfo">點我提示信息</button> -->
			<button @click="showInfo1">點我提示信息1（不傳參）</button>
			<button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚矽谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此處的this是vm
					alert('同學你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此處的this是vm
					alert('同學你好！！')
				}
			}
		})
	</script>

事件的修飾符


Vue中的事件修飾符（可以連續使用）：
		1.prevent：阻止預設事件（常用）；
		2.stop：阻止事件冒泡（常用）；
		3.once：事件只觸發一次（常用）；
		4.capture：使用事件的捕獲模式；
		5.self：只有event.target是當前操作的元素時才觸發事件；
		6.passive：事件的預設行為立即執行，無需等待事件回調執行完畢；
-->
修飾符代碼使用展示 
			<!-- 阻止預設事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">點我提示信息</button>
				<!-- 修飾符可以連續寫 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示信息</a> -->
			</div>

			<!-- 事件只觸發一次（常用） -->
			<button @click.once="showInfo">點我提示信息</button>

			<!-- 使用事件的捕獲模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是當前操作的元素時才觸發事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">點我提示信息</button>
			</div>

			<!-- 事件的預設行為立即執行，無需等待事件回調執行完畢； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

鍵盤按下事件

點擊查看代碼 
		<!-- 
				1.Vue中常用的按鍵別名：
							回車 => enter
							刪除 => delete (捕獲“刪除”和“退格”鍵)
							退出 => esc
							空格 => space
							換行 => tab (特殊，必須配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

				2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但註意要轉為kebab-case（短橫線命名）

				3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。
							(2).配合keydown使用：正常觸發事件。

				4.也可以使用keyCode去指定具體的按鍵（不推薦）

				5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名
		-->
		<!-- keydown 和keyup方便表示鍵盤按下就觸發事件和鍵盤按下抬起才觸發事件 -->
		<div id="root">
			<input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo">
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
		Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵

		new Vue({
			el:'#root',
			data:{
				name:'尚矽谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode) 這個e.key是可以獲取到你按了電腦哪個鍵對應的名稱
					// e.keyCode是這個鍵對應的編碼，鍵盤上基本上每個鍵都有一個對應的編碼
					console.log(e.target.value)
				}
			},
		})
	</script>

vue的計算屬性

計算屬性computed

點擊查看代碼 
<!-- 
計算屬性：
		1.定義：要用的屬性不存在，要通過已有屬性計算得來。
		2.原理：底層藉助了Objcet.defineproperty方法提供的getter和setter。
		3.get函數什麼時候執行？
					(1).初次讀取時會執行一次。
					(2).當依賴的數據發生改變時會被再次調用。
		4.優勢：與methods實現相比，內部有緩存機制（復用），效率更高，調試方便。
		5.備註：
				1.計算屬性最終會出現在vm上，直接讀取使用即可。
				2.如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算時依賴的數據發生改變。
-->
		<!-- 準備好一個容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			測試：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'張',
				lastName:'三',
				x:'你好'
			},
			computed:{
				fullName:{
					//get有什麼作用？當有人讀取fullName時，get就會被調用，且返回值就作為fullName的值
					//get什麼時候調用？1.初次讀取fullName時。2.所依賴的數據發生變化時。
					get(){
						console.log('get被調用了')
						// console.log(this) //此處的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什麼時候調用? 當fullName被修改時。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				//簡寫
				fullName(){
					console.log('get被調用了') // fullname後面加一個函數預設就是get（）
					return this.firstName + '-' + this.lastName
				}
				}
			}
		})
	</script>

vue的監視屬性

watch的基礎用法

點擊查看代碼 
		<!-- 
				監視屬性watch：
					1.當被監視的屬性變化時, 回調函數自動調用, 進行相關操作
					2.監視的屬性必須存在，才能進行監視！！
					3.監視的兩種寫法：
							(1).new Vue時傳入watch配置
							(2).通過vm.$watch監視
		 -->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>今天天氣很{{info}}</h2>
			<button @click="changeWeather">切換天氣</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎熱' : '涼爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			// 法一：
			/* watch:{
				isHot:{
					immediate:true, //當immediate為true時，會讓handler初始化時調用一下
					//handler函數什麼時候調用？當isHot發生改變時。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})
		// 法二：
		vm.$watch('isHot',{
			immediate:true, //初始化時讓handler調用一下
			//handler函數什麼時候調用？當isHot發生改變時。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>

深度監視deep=true

點擊查看代碼 
				//監視多級結構中某個屬性的變化，註意多級的需要加單引號
				/* 'numbers.a':{
					handler(){
						console.log('a被改變了')
					}
				} */
				//監視多級結構中所有屬性的變化，需要設置deep為true
				numbers:{
					deep:true, 、
					handler(){
						console.log('numbers改變了')
					}
				}

簡寫模式

點擊查看代碼 
//簡寫
/* isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
} */

//簡寫
/* vm.$watch('isHot',(newValue,oldValue)=>{
	console.log('isHot被修改了',newValue,oldValue,this)
}) */

計算屬性和監視屬性的對比

<!-- 
computed和watch之間的區別：
		1.computed能完成的功能，watch都可以完成。
		2.watch能完成的功能，computed不一定能完成，例如：watch可以進行非同步操作。
兩個重要的小原則：
			1.所被Vue管理的函數，最好寫成普通函數，這樣this的指向才是vm 或 組件實例對象。
			2.所有不被Vue所管理的函數（定時器的回調函數、ajax的回調函數等、Promise的回調函數），最好寫成箭頭函數，
				這樣this的指向才是vm 或 組件實例對象。
-->

vue綁定樣式

綁定class和style樣式

點擊查看代碼 
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			綁定樣式：
					1. class樣式
								寫法:class="xxx" xxx可以是字元串、對象、數組。
										字元串寫法適用於：類名不確定，要動態獲取。
										對象寫法適用於：要綁定多個樣式，個數不確定，名字也不確定。
										數組寫法適用於：要綁定多個樣式，個數確定，名字也確定，但不確定用不用。
					2. style樣式
								:style="{fontSize: xxx}"其中xxx是動態值。
								:style="[a,b]"其中a、b是樣式對象。
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<!-- 綁定class樣式--字元串寫法，適用於：樣式的類名不確定，需要動態指定 -->
			<!-- :class="mood"是可能需要動態添加的樣式 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 綁定class樣式--數組寫法，適用於：要綁定的樣式個數不確定、名字也不確定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 綁定class樣式--對象寫法，適用於：要綁定的樣式個數確定、名字也確定，但要動態決定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 綁定style樣式--對象寫法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 綁定style樣式--數組寫法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚矽谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					// Math.random()的意思是生成【0-1）的隨機數
					// Math.random()*3使得可以取到0.xxx、1.xxx、2.xxx不可能到3
					// Math.floor將數向下取整
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index] // 隨機從0、1、2取出一個索引
				}
			},
		})
	</script>

vue的條件渲染

v-show、v-if 、v-else-if與v-else

點擊查看代碼 
條件渲染：
			1.v-if
						寫法：
								(1).v-if="表達式" 
								(2).v-else-if="表達式"
								(3).v-else="表達式"
						適用於：切換頻率較低的場景。
						特點：不展示的DOM元素直接被移除。
						註意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。

			2.v-show
						寫法：v-show="表達式"
						適用於：切換頻率較高的場景。
						特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉
				
			3.備註：使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到。
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>當前的n值是:{{n}}</h2>
			<button @click="n++">點我n+1</button>
			<!-- 使用v-show做條件渲染 -->
			<!-- <h2 v-show="false">歡迎來到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">歡迎來到{{name}}</h2> -->
			<!-- <h2 v-show="a">歡迎來到{{name}}</h2> -->

			<!-- 使用v-if做條件渲染 -->
			<!-- <h2 v-if="false">歡迎來到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">歡迎來到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if與template的配合使用，不能和v-show配合 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚矽谷</h2>
				<h2>北京</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚矽谷',
				n:0,
				a:true
			}
		})
	</script>

vue的列表渲染

基本使用方法 
<!-- 
	v-for指令:
			1.用於展示列表數據
			2.語法：v-for="(item, index) in xxx" :key="yyy"
			3.可遍歷：數組、對象、字元串（用的很少）、指定次數（用的很少）
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<!-- 遍曆數組 -->
			<h2>人員列表（遍曆數組）</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍歷對象 -->
			<h2>汽車信息（遍歷對象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍歷字元串 -->
			<h2>測試遍歷字元串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍歷指定次數 -->
			<h2>測試遍歷指定次數（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'張三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奧迪A8',
						price:'70萬',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
v-for指令里key的工作原理 
<!-- 
面試題：react、vue中的key有什麼作用？（key的內部原理）
		
		1. 虛擬DOM中key的作用：
						key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DOM】, 
						隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下：
						
		2.對比規則：
					(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
								①.若虛擬DOM中內容沒變, 直接使用之前的真實DOM！
								②.若虛擬DOM中內容變了, 則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM。

					(2).舊虛擬DOM中未找到與新虛擬DOM相同的key
								創建新的真實DOM，隨後渲染到到頁面。
								
		3. 用index作為key可能會引發的問題：
							1. 若對數據進行：逆序添加、逆序刪除等破壞順序操作:
											會產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。

							2. 如果結構中還包含輸入類的DOM：
											會產生錯誤DOM更新 ==> 界面有問題。

		4. 開發中如何選擇key?:
							1.最好使用每條數據的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。
							2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，
								使用index作為key是沒有問題的。
-->
列表過濾（包含補充indexOf方法和filter方法的使用） 
		<div id="root">
			<h2>人員列表</h2>
			<input type="text" placeholder="請輸入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch實現
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'馬冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周傑倫',age:21,sex:'男'},
						{id:'004',name:'溫兆倫',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed實現
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'馬冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周傑倫',age:21,sex:'男'},
						{id:'004',name:'溫兆倫',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							// indexOf（）方法，判斷括弧內字元出現的位置，沒有就返回-1
							// 註意indexOf（""）,返回的是0
							return p.name.indexOf(this.keyWord) !== -1
							// filter方法，對哪個對象進行過濾，return返回什麼就是按照什麼條件進行過濾
						})
					}
				}
			}) 
		</script>
列表排序（sort方法） 
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>人員列表</h2>
			<input type="text" placeholder="請輸入名字" v-model="keyWord">
			<button @click="sortType = 2">年齡升序</button>
			<button @click="sortType = 1">年齡降序</button>
			<button @click="sortType = 0">原順序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原順序 1降序 2升序
					persons:[
						{id:'001',name:'馬冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周傑倫',age:18,sex:'男'},
						{id:'004',name:'溫兆倫',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判斷一下是否需要排序
						if(this.sortType){
							// sort（）方法裡面有兩個參數，a1-a2表示升序，a2-a1表示降序
							arr.sort((a1,a2)=>{
								return this.sortType === 1 ? a2.age-a1.age : a1.age-a2.age
							})
						}
						return arr
					}
				}
			}) 
		</script>

補充：vue中為列表裡添加數據的方法

// unshift是表示在列表的前面加一個值，push是往後面添加一個值
this.persons.unshift(p)

vue監測數據原理

點擊查看代碼 
<!--
	Vue監視數據的原理：
		1. vue會監視data中所有層次的數據。

		2. 如何監測對象中的數據？
						通過setter實現監視，且要在new Vue時就傳入要監測的數據。
							(1).對象中後追加的屬性，Vue預設不做響應式處理
							(2).如需給後添加的屬性做響應式，請使用如下API：
											Vue.set(target，propertyName/index，value) 或 
											vm.$set(target，propertyName/index，value)

		3. 如何監測數組中的數據？
							通過包裹數組更新元素的方法實現，本質就是做了兩件事：
								(1).調用原生對應的方法對數組進行更新。
								(2).重新解析模板，進而更新頁面。

		4.在Vue修改數組中的某個元素一定要用如下方法：
					1.使用這些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
					2.Vue.set() 或 vm.$set()
		
		特別註意：Vue.set() 和 vm.$set() 不能給vm 或 vm的根數據對象 添加屬性！！！
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h1>學生信息</h1>
			<!-- 邏輯簡單可以直接在click的雙引號里添加 -->
			<button @click="student.age++">年齡+1歲</button> <br/> 
			<button @click="addSex">添加性別屬性，預設值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性別</button> <br/>
			<button @click="addFriend">在列表首位添加一個朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一個朋友的名字為：張三</button> <br/>
			<button @click="addHobby">添加一個愛好</button> <br/>
			<button @click="updateHobby">修改第一個愛好為：開車</button> <br/>
			<button @click="removeSmoke">過濾掉愛好中的抽煙</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年齡：{{student.age}}</h3>
			<h3 v-if="student.sex">性別：{{student.sex}}</h3>
			<h3>愛好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友們：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽煙','喝酒','燙頭'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '張三'
				},
				addHobby(){
					this.student.hobby.push('學習')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'開車')
					// Vue.set(this.student.hobby,0,'開車')
					this.$set(this.student.hobby,0,'開車')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽煙'
					})
				}
			}
		})
	</script>

vue中收集表單數據

點擊查看代碼 
<!-- 
	收集表單數據：
			若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值。
			若：<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值。
			若：<input type="checkbox"/>
					1.沒有配置input的value屬性，那麼收集的就是checked（勾選 or 未勾選，是布爾值）
					2.配置input的value屬性:
							(1)v-model的初始值是非數組，那麼收集的就是checked（勾選 or 未勾選，是布爾值）
							(2)v-model的初始值是數組，那麼收集的的就是value組成的數組
			備註：v-model的三個修飾符：
							lazy：失去焦點再收集數據
							number：輸入字元串轉為有效的數字
							trim：輸入首尾空格過濾
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<form @submit.prevent="demo">
				賬號：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密碼：<input type="password" v-model="userInfo.password"> <br/><br/>
				年齡：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性別：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				愛好：
				學習<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戲<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃飯<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所屬校區
				<select v-model="userInfo.city">
					<option value="">請選擇校區</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武漢</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">閱讀並接受<a href="http://www.atguigu.com">《用戶協議》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>

vue的過濾器

點擊查看代碼 
		<!-- 
			過濾器：
				定義：對要顯示的數據進行特定格式化後再顯示（適用於一些簡單邏輯的處理）。
				語法：
						1.註冊過濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用過濾器：{{ xxx | 過濾器名}}  或  v-bind:屬性 = "xxx | 過濾器名"
				備註：
						1.過濾器也可以接收額外參數、多個過濾器也可以串聯
						2.並沒有改變原本的數據, 是產生新的對應的數據
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>顯示格式化後的時間</h2>
			<!-- 計算屬性實現 -->
			<h3>現在是：{{fmtTime}}</h3>
			<!-- methods實現 -->
			<h3>現在是：{{getFmtTime()}}</h3>
			<!-- 過濾器實現 -->
			<h3>現在是：{{time | timeFormater}}</h3>
			<!-- 過濾器實現（傳參） -->
			<h3>現在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚矽谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局過濾器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //時間戳
				msg:'你好，尚矽谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部過濾器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>

vue的內置指令

v-test指令

點擊查看代碼 
<!-- 
		我們學過的指令：
				v-bind	: 單向綁定解析表達式, 可簡寫為 :xxx
				v-model	: 雙向數據綁定
				v-for  	: 遍曆數組/對象/字元串
				v-on   	: 綁定事件監聽, 可簡寫為@
				v-if 	 	: 條件渲染（動態控制節點是否存存在）
				v-else 	: 條件渲染（動態控制節點是否存存在）
				v-show 	: 條件渲染 (動態控制節點是否展示)
		v-text指令：
				1.作用：向其所在的節點中渲染文本內容。
				2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚矽谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>

v-html指令

點擊查看代碼 
<!-- 
		我們學過的指令：
				v-bind	: 單向綁定解析表達式, 可簡寫為 :xxx
				v-model	: 雙向數據綁定
				v-for  	: 遍曆數組/對象/字元串
				v-on   	: 綁定事件監聽, 可簡寫為@
				v-if 	 	: 條件渲染（動態控制節點是否存存在）
				v-else 	: 條件渲染（動態控制節點是否存存在）
				v-show 	: 條件渲染 (動態控制節點是否展示)
		v-text指令：
				1.作用：向其所在的節點中渲染文本內容。
				2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。
-->

v-cloak指令

點擊查看代碼 
		<!-- 
				v-cloak指令（沒有值）：
						1.本質是一個特殊屬性，Vue實例創建完畢並接管容器後，會刪掉v-cloak屬性。
						2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。
		-->

v-once指令

點擊查看代碼 
		<!-- 
			v-once指令：
						1.v-once所在節點在初次動態渲染後，就視為靜態內容了。
						2.以後數據的改變不會引起v-once所在結構的更新，可以用於優化性能。
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>當前的n值是:{{n}}</h2>
			<button @click="n++">點我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

v-pre指令

點擊查看代碼 
		<!-- 
			v-pre指令：
					1.跳過其所在節點的編譯過程。
					2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯。
		-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2 v-pre>Vue其實很簡單</h2>
			<h2 >當前的n值是:{{n}}</h2>
			<button @click="n++">點我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

vue中自定義指令

點擊查看代碼 
<!-- 
	需求1：定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍。
	需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素預設獲取焦點。
	自定義指令總結：
			一、定義語法：
						(1).局部指令：
									new Vue({															new Vue({
										directives:{指令名:配置對象}   或   		directives{指令名:回調函數}
									}) 																		})
						(2).全局指令：
										Vue.directive(指令名,配置對象) 或   Vue.directive(指令名,回調函數)

			二、配置對象中常用的3個回調：
						(1).bind：指令與元素成功綁定時調用。
						(2).inserted：指令所在元素被插入頁面時調用。
						(3).update：指令所在模板結構被重新解析時調用。

			三、備註：
						1.指令定義時不加v-，但使用時要加v-；
						2.指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名。
-->
		<!-- 準備好一個容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>當前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍後的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍後的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">點我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定義全局指令
		/* Vue.directive('fbind',{
			//指令與元素成功綁定時（一上來）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入頁面時
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析時
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚矽谷',
				n:1
			},
			directives:{
				//big函數何時會被調用？1.指令與元素成功綁定時（一上來）。2.指令所在的模板被重新解析時。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				big(element,binding){
					console.log('big',this) //註意此處的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令與元素成功綁定時調用（一上來）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入頁面時調用
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析時調用
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>

vue的生命周期

image


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C4D R25插件：Arnold for Cinema 4D for mac(C4D R25阿諾德渲染器)
    Arnold for Cinema 4D是用於C4D R25的阿諾德渲染器，支持R25.010 及以上的C4D，SolidAngle Cinema 4D To Arnold 是一款先進的蒙特卡洛光線追蹤渲染器，專為動畫長度和視覺效果的需求而打造。 詳情：C4D R25插件：Arnold for Ci ...
  • Sqlite 安裝操作使用
    一、什麼是 SQLite 資料庫 SQLite 是嵌入式SQL資料庫引擎。與大多數其他 SQL 資料庫不同，SQLite 沒有單獨的伺服器進程。SQLite 直接讀取和寫入普通磁碟文件。具有多個表，索引，觸發器和視圖的完整 SQL 資料庫包含在單個磁碟文件中。資料庫文件格式是跨平臺的-您可以在32位 ...
  • 一個 MySQL 隱式轉換的坑，差點把伺服器整崩潰了
    我是風箏，公眾號「古時的風箏」，專註於 Java技術 及周邊生態。 文章會收錄在 JavaNewBee 中，更有 Java 後端知識圖譜，從小白到大牛要走的路都在裡面。 本來是一個平靜而美好的下午，其他部門的同事要一份數據報表臨時彙報使用，因為系統目前沒有這個維度的功能，所以需要寫個SQL馬上出一下 ...
  • PostgreSQL 最常用的插件
    背景 監控、優化、診斷 cpu, io消耗監控https://github.com/powa-team/pg_stat_kcache where條件過濾性統計https://github.com/powa-team/pg_qualstats cgroup , /proc 系統級指標統計https:/ ...
  • [一句話說iOS]dispatch如何造成死鎖
    dispatch_sync執行了兩件事：把代碼塊放入指定線程的任務隊列中、堵塞當前線程直到代碼塊執行結束，如果出現了堵塞的線程和代碼塊所在的線程為同一線程的話，這個時候代碼無法在此線程執行繼續下去，即造成了死鎖。 - (void)viewDidLoad { [super viewDidLoad]; ...
  • AR空間音頻能力，打造沉浸式聲音體驗
    隨著元宇宙的興起，3D虛擬現實廣泛引用，讓數字化信息和現實世界融合，目前大家的目光主要聚焦於視覺交互層面，為了在虛擬環境中更好的再現真實世界的三維空間體驗，引入聽覺層面必不可少，空間音頻孕育而生。 空間音頻是一種音頻體驗，會讓用戶更容易體驗到聲音的立體感和深度，將環繞聲更準確地定位在合適的方位，讓用 ...
  • 第一百零七篇:基本數據類型(undefined,null,boolean類型)
    好家伙， 本篇內容為《JS高級程式設計》第三章學習筆記 1.數據類型 ECMAScript有6種簡單數據類型（稱為原始類型）： Undefined， Null， Boolean， Number, String和Symbol。 Symbol （符號）是ECMAScript6新增的。還有一種複雜數據類型 ...
  • Ant Design Pro V5 本地訪問signalR一直待處理
    Ant Design Pro V5 訪問signalR ： connection.start 沒反應， network顯示待處理， 原來是代理沒設置好，需要配置成支持websocket，配置如下圖所示。 ...
一周排行
    -Advertisement-
    Play Games
  • .net 6 C#中System.IO.Path類的用法
    1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 使用WebApi+Vue3從0到1搭建《許可權管理系統》:二、搭建JWT系統鑒權
    視頻地址：【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻：搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 實戰指南：使用 xUnit 和 ASP.NET Core 進行集成測試【完整教程】
    引言 集成測試可在包含應用支持基礎結構（如資料庫、文件系統和網路）的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比，能夠在更廣泛的級別上評估應用的組件，確認多個組件一起工作以生成預 ...
  • .NET Emit 入門教程：第六部分：IL 指令：9：詳解 ILGenerator 指令方法：運算操作指令（指令篇結束）
    在.NET Emit編程中，我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作，能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令，開發人員可以靈活地進行算術運算、邏輯運算和比較操作，從而實現各種複雜的演算法和邏輯......本篇之後，將進入第七部分：實戰項目 ...
  • WPF多表頭表格實現
    前言 多表頭表格是一個常見的業務需求，然而WPF中卻沒有預設實現這個功能，得益於WPF強大的控制項模板設計，我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格，統計1-12月的數據。 此時我們有一個需求，需要將月份按季度劃分，以便能夠直觀地看到季度統計數據，以下為該需求 ...
  • gRPC入門學習之旅（七）
    如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面，比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤.....
    System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 精通中間件測試：Asp.Net Core實戰指南，提升應用穩定性和可靠性
    引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰，這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎？ TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • Case表達式
    在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 揭秘：C#語法中“_ =” 是什麼？
    在C#編程世界中，語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中，“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用，揭示其作為C#語法奇兵的重要角色。 一、下劃線 _：神秘的棄元符號 下劃線 _ 在C#中並非 ...
所有分類