Vue常用特性-有解無憂

一.表單基本操作

1. 單選框操作

	<head>
		<meta charset="utf-8" />
		<title>vue特性</title>
	</head>
	<body>
		<!-- 測驗 vue input 單選框選中 -->
		<div id="app">
			<!-- 在vue根據后臺資料來選中男女以前基本使用if判斷 -->
			<div v-if="gender===1">
				<!-- 如果為1讓男選中 -->
				<input type="radio" name="" id="man" value="https://www.cnblogs.com/2979100039-qq-con/p/1" checked="checked" />
				<label for="man">男</label>
			</div>
			<div v-else>
				<!-- 如果為1讓男選中 -->
				<input type="radio" name="" id="man" value="https://www.cnblogs.com/2979100039-qq-con/p/1" />
				<label for="man">男</label>
			</div>
			<div v-if="gender===2">
				<!-- 如果為2讓女選中 -->
				<input type="radio" name="" id="woman" value="https://www.cnblogs.com/2979100039-qq-con/p/2" checked="checked" />
				<label for="woman">女</label>
			</div>
			<div v-else>
				<!--如果不為2讓女不選中 -->
				<input type="radio" name="" id="man" value="https://www.cnblogs.com/2979100039-qq-con/p/1" />
				<label for="man">女</label>
			</div>
			<br>
			<!-- 使用if判斷會顯得格外的繁瑣  -->
			<hr>
			<!-- vue通過v-model的雙向系結的來監控 若 gender的值與該單選框的value的值想等則該
				單選框選中，可以試著把value都改為2試試
			 -->
			<input type="radio" name="" id="man" value="https://www.cnblogs.com/2979100039-qq-con/p/1" v-model="gender" />
			<label for="man">男</label>
			<input type="radio" name="" id="woman" value="https://www.cnblogs.com/2979100039-qq-con/p/2" v-model="gender" />
			<label for="woman">女</label>
		</div>
		<!-- 測驗時將gender值切換 -->
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					// 假設 存盤的性別為 2 即為女
					gender: 2,
				}
			})
		</script>
	</body>

2.復選框操作

? 我們如法炮制寫一下復選框

<body>
		<div id="app">
			<!-- 定義三組愛好  -->
			<input type="checkbox" name="" id="daqiu" value="https://www.cnblogs.com/2979100039-qq-con/p/打球" v-model="hobby" />
			<label for="daqiu">打球</label>
			<input type="checkbox" name="" id="qiaodaima" value="https://www.cnblogs.com/2979100039-qq-con/p/敲代碼" v-model="hobby" />
			<label for="qiaodaima">敲代碼</label>
			<input type="checkbox" name="" id="xuexi" value="https://www.cnblogs.com/2979100039-qq-con/p/學習" v-model="hobby" />
			<label for="xuexi">學習</label>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					/* 定義復選框 資料時使用陣列,與單選框同樣的性質 ，若 hobby
					的值有單選框中的value值則選中
					*/
					hobby: ['打球', '敲代碼']
				},
			})
		</script>
	</body>

3.表單修飾符

<body>
		<div id="app">
			<!--
				number 修飾符 type="number" 是html 表單自帶的屬性 
				在表面上一看其實加不加number都無所謂,其實在獲取表單value
				時我們獲取的都是字串型別,加上了.number會自動轉換為整型(或浮點型)
			-->
			<input type="number" v-model.number="number" />
			<!-- v-model.trim的作用是清除用戶輸入的兩端空格   -->
			<input v-model.trim="msg" v-on:focusout="print" />
			<br>
			<hr />

			<p style="color: red;">
				.lazy 在更新頁面資料時不會實時更新而是當input失去焦點，回車這些事件時二發生改變下面兩個                 表單一個加了.lazy一個沒有加
			</p>
			<input v-model.lazy="msg">
			<input v-model="msg">
			<span v-text="msg"></span>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					number: 121 + "212.2",
					msg: "定義一個有空格的字串",
				},
				methods: {
					/* 失去焦點時將msg列印一下
						會發現v-model.trim會清空 兩端空格 
						而普通的v-model 不會
					  */
					print: function() {
						console.log(this.msg);
					}
				}
			})
		</script>
	</body>

4.自定義指令

Vue.directive自定義全域指令

<body>
		<div id="app">
			<input type="text" v-focus />
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 全域指令在定義時 定義在其他vue實體之外

			/*
				自定義指令在定義時 如果采用駝峰命名法，例如 
				定義為 focusF 則在視圖使用時應該 用v-focus-f 這樣使用
				如果只是單純的focusf 則用 v-focusf 這樣使用
			*/
			// 自定義一個全域指令  自動聚焦
			Vue.directive('focus', {
				inserted: function(el) {
					el.focus();
					el.placeholder = "自定義自動聚焦指令"
				}
			});
			new Vue({
				el: "#app",
			})
		</script>
	</body>

Vue.directive 注冊全域指令帶引數

<body>
		<div id="app">
			<div v-color="msg">

			</div>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 定義全域帶參指令 v-color

			/* 全域變數將 用戶傳入 的資料決議 并賦值給該實體 */
			Vue.directive('color', {
		//bind - 只呼叫一次，在指令第一次系結到元素上時候呼叫
		// binding 為自定義的函式形參   通過自定義屬性傳遞過來的值 存在 binding.value 里面
				bind: function(el, binding) {
					// 根據指令的引數設定背景色 寬 高
					el.style.backgroundColor = binding.value.color;
					el.style.width = binding.value.width;
					el.style.height = binding.value.height;
				}
			})
			new Vue({
				el: "#app",
				data: {
					// 定義一組樣式資料 
					msg: {
						color: "red",
						width: "200px",
						height: "200px"
					},
				}
			})
		</script>
	</body>

自定義區域指令
- 區域指令，需要定義在 directives 的選項用法和全域用法一樣
- 區域指令只能在當前組件里面使用
- 當全域指令和區域指令同名時以區域指令為準

<body>
		<div id="app" v-color="msg">
			<input type="text" v-focus/>
		</div>
		<br><br>
		<p>
			在第二個app1實體中我們同樣使用了v-color指令，當有與v-color是app
			中的區域指令所以無法生效，當v-focus卻可以生效
		</p>
		<div id="app1" v-color="msg">
			<input type="text"  v-focus/>
		</div>

		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 在這里我們定義一個全域組件 它可以在 全域使用
			Vue.directive('focus', {
				inserted: function(el) {
					el.focus();
					el.placeholder = "我使用了自定義自動聚焦指令"
				}
			});
			// 創建 第#app 實體 
			var vm = new Vue({
				el: "#app",
				data: {
					msg: {
						color: 'red',
						width: "200px",
						height: "200px"
					},
				},
				// 在這里我們定義一個 區域指令 它只能在#app組件上使用
				directives: {
					color: {
						bind: function(el, binding) {
							// 根據指令的引數設定背景色 寬 高
							el.style.backgroundColor = binding.value.color;
							el.style.width = binding.value.width;
							el.style.height = binding.value.height;
						}
					}
				}
			});
			new Vue({
				el:"#app1",
			})
		</script>
	</body>

二.監聽器和過濾器

1.計算屬性

<body>
		<div id="app">
			<!--  
		        當多次呼叫 reverseString  的時候 
		        只要里面的 num 值不改變 他會把第一次計算的結果直接回傳
				直到data 中的num值改變 計算屬性才會重新發生計算
		     -->
			<div>{{reverseString}}</div>
			<div>{{reverseString}}</div>
			<!-- 呼叫methods中的方法的時候  他每次會重新呼叫 -->
			<div>{{reverseMessage()}}</div>
			<div>{{reverseMessage()}}</div>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
		      計算屬性與方法的區別:計算屬性是基于依賴進行快取的，而方法不快取
		    */
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'Nihao',
					num: 10
				},
				methods: {
					reverseMessage: function() {
						console.log('methods')
						return this.msg.split('').reverse().join('');
					}
				},
				//computed  屬性 定義 和 data 已經 methods 平級 
				computed: {
					//  reverseString   這個是我們自己定義的名字 
					reverseString: function() {
						console.log('computed')
						var total = 0;
						//  當data 中的 num 的值改變的時候  reverseString  會自動發生計算  
						for (var i = 0; i <= this.num; i++) {
							total += i;
						}
						// 這里一定要有return 否則 呼叫 reverseString 的 時候無法拿到結果    
						return total;
					}
				}
			});
		</script>
	</body>

2.偵聽器 watch

使用watch來回應資料的變化
一般用于異步或者開銷較大的操作
watch 中的屬性一定是data 中已經存在的資料
當需要監聽一個物件的改變時，普通的watch方法無法監聽到物件內部屬性的改變，只有data中的資料才能夠監聽到變化，此時就需要deep屬性對物件進行深度監聽

<body>
		<div id="app">
			<p>當 input值發生改變時觸發監聽器 求和</p>
			<!-- 定義 兩個 數使用監聽器來 求和  -->
			<label for="fristNumber">第一個數</label>
			<input type="number" name="" id="fristNumber" v-model.number="fristNumber" />
			<label for="lastNumber">第二個數</label>
			<input type="number" name="" id="lastNumber" v-model.number="lastNumber" />
			<br>兩者之和:{{sum}}
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					fristNumber: 21,
					lastNumber: 12,
					sum: ''
				},
				// mounted 鉤子函式 在初始化頁面 后執行
				mounted: function() {
					this.sum = this.fristNumber+this.lastNumber
				},
				// 監聽器
				watch: {
					// 第一個數的監聽器 當第一個數改變時,執行方法求和
					fristNumber: function(val) {
						this.sum = val + this.lastNumber;
					},
					// 第二個數的監聽器 當第一個數改變時,執行方法求和
					lastNumber: function(val) {
						this.sum = val + this.fristNumber;
					}
				}
			})
		</script>
	</body>

3.過濾器

vue.js允許自定義過濾器
過濾器不該變真正的data資料，改變的是渲染頁面的結果
全域過濾器使用filter定義，區域使用filters定義，一個不加s一個加s
支持級聯

1.全域過濾器

<body>
		<div id="app">
			<!-- <p>修改input值</p>
		<input type="text" name="" id=""  v-model="msg"/> -->
			<!-- 在msg 渲染頁面時 ，先走了一遍msgFormat這個過濾器以過濾器反復的資料為準 -->
			<p>{{msg | msgFormat}}</p>

			// 全域 帶參
			<p>{{msg | msgFormat2(1,3,5)}}</p>
		</div>


		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 定義全域 過濾器 
			Vue.filter('msgFormat', function(msg) {
				// 
				if (1 === msg) {
					return "msg等于1";
				} else {
					return "msg不等于1";
				}
			});
			<!-- 定義全域帶參過濾器 msg是實體中的msg,...arg是可變引數  -->
			Vue.filter("msgFormat2", function(msg, ...arg) {
				// 將過濾器傳入的值進行遍歷求和并回傳渲染
				var sun = 0;
				for (var i = 0; i < arg.length; i++) {
					sun = sun + arg[i]
				}
				sun = sun+msg;
				return arg.length+"數之和加上msg等于"+sun
			});
			new Vue({
				el: "#app",
				data: {
					// 設定msg等于1
					msg: 1,
				}
			});
		</script>
	</body>

2.區域過濾器

<body>
		<!-- 
			區域過濾器和全域過濾器很相似 就像區域監聽器監聽器一樣只能
			在當前實體中使用，在其他實體中使用不起效果
		 -->

		<div id="app">
			<p>{{msg | msgFormat}}</p>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					msg: 1,
				},
				// 區域過濾器
				filters: {
					// msgFormat過濾器 
					msgFormat: function(msg) {
						if (msg === 1) {
							return "msg的值等于1";
						} else {
							return "msg的值不等于1";
						}
					}
				}
			})
		</script>
	</body>

三.生命周期和鉤子函式

1.生命周期

事物從出生到死亡的程序
Vue實體從創建到銷毀的程序，這些程序中會伴隨著一些函式的自呼叫，我們稱這些函式為鉤子函式

2.常用的鉤子函式

beforeCreate	在實體初始化之后，資料觀測和事件配置之前被呼叫此時data 和 methods 以及頁面的DOM結構都沒有初始化什么都做不了
created	在實體創建完成后被立即呼叫此時data 和 methods已經可以使用但是頁面還沒有渲染出來
beforeMount	在掛載開始之前被呼叫此時頁面上還看不到真實資料只是一個模板頁面而已
mounted	el被新創建的vm.$el替換，并掛載到實體上去之后呼叫該鉤子，資料已經真實渲染到頁面上在這個鉤子函式里面我們可以使用一些第三方的插件
beforeUpdate	資料更新時呼叫，發生在虛擬DOM打補丁之前，頁面上資料還是舊的
updated	由于資料更改導致的虛擬DOM重新渲染和打補丁，在這之后會呼叫該鉤子，頁面上資料已經替換成最新的
beforeDestroy	實體銷毀之前呼叫
destroyed	實體銷毀后呼叫

3.鉤子函式使用演示

<body>
		<div id="app">
			<input v-model="msg" />
			<p v-text="msg"></p>
			<button type="button" v-on:click="destroyVm">點擊銷毀實體</button>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "鉤子函式演示"
				},
				beforeCreate: function() {
					console.log("beforeCreate實體初始化之后呼叫");
				},
				created: function() {
					console.log("實體創建完成后created被呼叫");
				},
				beforeDestroy:function(){
					console.log("銷毀之前呼叫");
				},
				destroyed:function(){
					console.log("銷毀之后呼叫");
				},
				methods: {
					destroyVm: function() {
						alert("實體被銷毀");
						// $destroy 銷毀 vm實體銷毀后vm實體將不存在
						vm.$destroy();
					}
				}
			});
		</script>
	</body>

四.vue陣列拓展方法

在 Vue 中，直接修改物件屬性的值無法觸發回應式，當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容并沒有改變
變異陣列方法即保持陣列方法原有功能不變的前提下對其進行功能拓展

`push()`	往陣列最后面添加一個元素，成功回傳當前陣列的長度
`pop()`	洗掉陣列的最后一個元素，成功回傳洗掉元素的值
`shift()`	洗掉陣列的第一個元素，成功回傳洗掉元素的值
`unshift()`	往陣列最前面添加一個元素，成功回傳當前陣列的長度
`splice()`	有三個引數，第一個是想要洗掉的元素的下標（必選），第二個是想要洗掉的個數（必選），第三個是洗掉后想要在原位置替換的值
`sort()`	sort() 使陣列按照字符編碼默認從小到大排序,成功回傳排序后的陣列
`reverse()`	reverse() 將陣列倒序，成功回傳倒序后的陣列

替換陣列

不會改變原始陣列，但總是回傳一個新陣列

filter	filter() 方法創建一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素，
concat	concat() 方法用于連接兩個或多個陣列，該方法不會改變現有的陣列
slice	slice() 方法可從已有的陣列中回傳選定的元素，該方法并不會修改陣列，而是回傳一個子陣列

動態陣列回應式資料

Vue.set(a,b,c) 讓觸發視圖重新更新一遍，資料動態起來
a是要更改的資料、 b是資料的第幾項、 c是更改后的資料

五.章節小題

使用vue完成頁面crud操作

<body>
		<!-- 我們定義一個頁面級的增刪查改案例來練習陣列的操作 -->
		<div id="app" >
			<input type="text" v-model="id" disabled="disabled" />
			<span>{{name}}</span><input type="text" name="" id="name" value="" v-model="name" />
			<button type="button" v-on:click="addList">提交</button>
			<table >
				<!-- 表頭 -->
				<tr>
					<th v-for="t in title">
						{{t}}
					</th>
				</tr>
				<!-- 主體 -->
				<tr v-for="(list,index) in dataList">
					<td>{{list.id}}</td>
					<td>{{list.name}}</td>
					<td>
						<a href="https://www.cnblogs.com/2979100039-qq-con/p/#" v-on:click="update(list.id)">修改</a>
						<a href="https://www.cnblogs.com/2979100039-qq-con/p/#" v-on:click="deleteData(list.id)">洗掉<a>
					</td>
				</tr>
			</table>
			<div id="" style="text-align: center;">
						總資料量:<span>{{total}}</span>
					</div>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flag: false,
					name: '',
					id: '',
					title: ["id", "姓名", "操作"],
					dataList: [{
							id: 1,
							name: "李四"
						},
						{
							id: 2,
							name: "王五"
						},
						{
							id: 3,
							name: "張飛"
						},
						{
							id: 4,
							name: "小喬"
						},
					]
				},
				methods: {
					// 定義添加 方法
					addList: function() {
						// 添加
						if (this.flag === false) {
							var data = https://www.cnblogs.com/2979100039-qq-con/p/{};
							// 獲取 addName
							data.name = this.name;
							// console.log(addName);
							// 求添加前資料長度
							data.id = this.dataList.length + 1;
							// console.log(dataSzie)
							// push 操作 往陣列最后一個添加資料
							this.dataList.push(data);
						} else {
							// 修改
							var list = this.dataList;
							for (var i = 0; i <= list.length; i++) {
								if (this.id == list[i].id) {
									// 遍歷 資料集合 將 對應id的值改為修改后的值
									list[i].name = this.name;
									break;
								}
							}
							this.flag = false;
							/* 	this.name ='';
								this.id = ''; */
						}
						// 添加 過后清空
						this.name = '';
						this.id = '';
					},
					update: function(dataId) {
						var list = this.dataList;
						for (var i = 0; i <= list.length; i++) {
							if (list[i].id == dataId) {
								this.id = list[i].id;
								this.name = list[i].name;
								this.flag = true;
							}
						}
					},
					deleteData: function(dataId) {
						// 使用過濾器 將 洗掉 的資料過濾出去
						this.dataList = this.dataList.filter(function(item) {
							return item.id != dataId;
						});
					}
				},
				computed: {
					total: function() {
						// 3.1  計算圖書的總數
						return this.dataList.length;
					}
				}
			})
		</script>
	</body>

dmoe下載：https://gitee.com/li_shang_shan/vue-feature-demo

個人學習，內容簡略

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/228861.html

標籤：JavaScript

上一篇：JS實作滑鼠移入DIV隨機變換顏色

下一篇：JavaScript的書寫位置