天天看點
傳回

Vue筆記（第一篇）01基本指令通過之前所學所寫案例,結合了Bootstrap

01基本指令

01、v-text 

<div id="app">
	<p v-text="message"></p>     //使用方法
</div>
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				message:"在此一遊"
			}
		})
        
        
/*
v-text使用方法和js中的innerText類似，但是會覆寫該标簽裡的其他内容
*/

02、v-html 

<div id="app">
	<p v-html="message"></p>
</div>
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"<h1>巴斯少年在此<h1>"
		}
	})
		</script>



/*
使用方法與innerHTML類似，但其中标簽的内容會被完全覆寫
*/

03、v-once 

<div id="app">
	<p v-once v-html="message"></p>
	<p v-html="message"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
		message:"江南皮革廠倒閉了"
		}
	})
    
    
  
    
/*
v-once這個值不用指派，放在标簽中這個标簽隻會保留初始值，無法再更改其标簽的内容
*/

04、v-pre 

<div id="app">
	<p v-pre v-text="message">{{message}}</p>
</div>
		
		
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"這裡嘎嘎嘎阿嘎嘎嘎"
		}
	})
    
    
   
    
/*
v-pre不用指派，被這個标簽定義了将不會編譯其中的代碼
*/

05、v-model 

<div id="app">
	<input type="text" v-model="message" />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			message:"請輸入你需要的内容"
		}
})
</script>



/*
v-model可以将input标簽的内容與data資料綁定
type類型為text直接使用就可以
type類型為checkbox，當v-model值為數組時，勾選标簽會将value中的值添加到數組中，若是字元串，勾選會為true，未勾選為false
type類型為radio，value中的值是什麼，v-model綁定的值，就會顯示什麼
select與option标簽（下拉框），因為option不支援v-model标簽，是以v-model隻能設定在select，選中哪個，就是那個value的值
*/

v-model的修飾符

1、.lazy不是實時改變，而是在失去焦點或按回車時才會更新

2、.number是嘗試将輸入的值，轉換為數值類型

注：在最開頭輸入的字元串，會轉變為字元串類型，但在數字後面輸入字元串，會自動清除。在小數後面加“.”也會被清除

3、.trim自動過濾輸入值中首尾的空格

所有修飾符可以并聯使用

06、v-show 

根據表達式的真假，切換元素display css屬性
js六大假值:false、0、NaN、""、null、undefined

為假就會不顯示該元素display:none


<div id="app">
   <h3 v-show="msg">這标簽擁有v-show屬性</h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
   var vue = new Vue({
   	el:"#app",
   	data:{
   		msg:""
   	}
   })
</script>

07、v-if,v-else-if,v-else 

<!--
	v-else-if隻能跟在v-if或v-else-if後面，若跟在v-else後，将會不起作用
-->

<div id="app">
	<p v-if="flag>=0 && flag<18">未成年</p>
	<p v-else-if="flag>=18 && flag<=40">青年</p>
	<p v-else>老年</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			flag:18
		}
	})
</script>

v-if和v-show的差別

1、v-if是讓元素隐藏的時候，是直接把dom元素删除，v-show在dom元素上添加一個樣式display，把内容隐藏起來

2、v-show不占頁面位置，但是占dom節點位置

頻繁切換：使用v-show較好
運作條件較少改變：使用v-if較好

08、v-for

①、周遊字元串和自己定義n循環數字 

周遊字元串時，會自動把每個字元串單個周遊出來
<div id="app">
	<p v-for="v in msg">{{v}}</p>   //第一行是“劉”，第二行是“帥”
    <p v-for="n in 10">{{n}}</p>    //輸出1-10
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			msg:"劉帥"
		}
	})
</script>

②、周遊數組 

<!--
	   v-for周遊循環數組  
	   item:數組的值
	   index:數組的下标
	   arr:數組
	   in:周遊數組（與of相同，都可以寫）
-->

<div id="app">
	<p v-for="item,index in arr">{{item}}------{{index}}</p>      
	<p v-for="m,i in arr">{{m}}-----{{i}}</p>
    <p v-for="m,i of arr">{{m}}-----{{i}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			arr:["劉帥","阿強","小平頭"]
		}
	})
</script>

③、周遊對象 

<!--
	v-for周遊循環對象
	u,k,i（值，鍵，下标）
	obj.name  也可以周遊對象中的屬性
-->

<div id="app">
	<p v-for="u,k,i in obj">{{u}}---{{k}}----{{i}}</p>
    							<!--
									宅男---name----0
									18---age----1
									家裡蹲---company
								-->
    
    
	<p v-for="u in obj.name">{{u}}</p>          
    							<!-- sc:
									宅
									男
								-->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			obj:{
				name:"宅男",
				age:18,
				company:"家裡蹲"
			}
		}
	})
</script>

④、周遊數組對象 

<!--
	v,i（v代表數組值，i代表下标）
-->


<div id="app">
	<p v-for="v,i in user">{{v.name}}---{{v.sex}}---{{v.hobby}}---{{i}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	<!-- 建立vue執行個體 -->
	var vm=new Vue({
		el:"#app",
		data:{
			user:[
				{
					name:"劉帥",
					sex:"男",
					hobby:"象棋"
				},{
					name:"友誼",
					sex:"男",
					hobby:"敲代碼"
				},{
					name:"周生生",
					sex:"男",
					hobby:"學習"
				},
			]
		}
	})
</script>

09、v-bind

①、a标簽與img标簽的動态綁定 

<div id="app">
	<a v-bind:href="uhref">			<!--  可以簡寫為   :href="" target="_blank" rel="external nofollow"   -->
		<img v-bind:src="uimg" >     <!--  可以簡寫為   :img=""  -->
	</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			uhref:"http://www.baidu.com",
			uimg:"https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"
		}
	})
</script>

②、動态綁定class 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{
				color:red;
			}
			.bgc{
				background-color: pink;
			}
			.bor{
				border: 1px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 class="red bgc">普通class</h2>
			<!-- 使用數組這裡，是直接引用上面的style裡的樣式，與classobj無關,v-bind:可以簡寫為: -->
			<h2 v-bind:class="['red','bgc']">使用數組</h2>
            
			<!-- 數組中使用三元運算符 -->
			<h2 :class="[flag ? 'red':'bgc']">使用三元運算符</h2>
			
            <!-- 使用下面的對象，true顯示，false不顯示 -->
			<h2 :class="classobj">使用對象</h2>
			
            <!-- 普通class與v-bind:class可以共存 -->
			<h2 class="bor" :class="{bgc:true,red:flag}">class與:class可以共存</h2>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					flag:true,
					classobj:{
						red:true,
						bgc:false
					}
				}
			})
		</script>
	</body>
</html>

③、動态綁定stlye 

<div id="app">
    <!-- 記得直接引用是用"{···}" 和css非常相似，其實就是他就是一個javascript對象-->
	<h2 :style="{color:'red'}">對象綁定style</h2>
			
    <!-- 将寫好的對象樣式放在data中，用數組引用 -->
	<h2 :style=[obj1,obj2]>數組綁定style</h2>
			
    <!-- 直接引用于在data資料中聯合使用，實作内聯 -->
	<h2 :style="{color:'red',fontSize:fz+'px'}">對象内聯</h2>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			flag:true,
			obj1:{
				color:"pink"
			},
			obj2:{
				"font-size":"50px"       //這裡font-size不加引号可以寫為fontSize
			},
			fz:10
		}
	})
</script>

10、v-on基本使用

基礎使用 

<div id="app">
			<p id="">點選的次數是{{msg}}</p>
			<button type="button" v-on:click="msg++">+1</button>
			<button type="button" v-on:dblclick="msg+=2">輕按兩下</button>   <!-- dblclick輕按兩下 -->
            
            <!-- v-on:可以簡寫為"@" -->
			<button type="button" @click="clicktwo()">隻能+1兩次</button>
			<p>{{str}}</p>
            			<!-- 不傳參數可以省略括号() -->
			<button type="button" @click="rString">反轉</button>
            
            <!-- 直接使用{{}}調用函數也是可以的 -->
            <p>{{methods()}}</p>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					msg:0,
					str:"abcdefg"
				},
				methods:{         // methods中是用來存放函數，這裡面的函數會自動成為vue執行個體的方法
					clicktwo:function(){
						this.msg++;
						if(this.msg>=2){
							this.msg=2;
						}
					},
					rString(){         // rString:function(){}可以簡寫為rString()
                        				//分割，反轉，拼接
						this.str=this.str.split("").reverse().join("")
					}
				}
			})
		</script>

函數傳入參數 

<div id="app">
			<button type="button" @click="test">沒加括号</button>      <!-- MouseEvent {isTrusted: true, screenX: 20, screenY: 115, clientX: 20, clientY: 12, …} -->
			<button type="button" @click="test()">加了括号</button>		<!-- undefined -->
			<button type="button" @click="test(123)">傳了參數</button>	<!-- 123 -->
			
			<button type="button" @click="rev($event,'手動傳遞事件')">手動傳遞事件</button>   <!-- $event是MousEvent {isTrusted: true, screenX: 20, screenY: 115, clientX: 20, clientY: 12, …} -->
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					msg:0,
					str:"abcdefg"
				},
				methods:{
					test(ev){
						console.log(ev);
					},
					rev(ev,str){
					console.log(str);
					console.log("ev",ev)
					}
				}
			})
		</script>

綁定多個事件 

<div id="app">
			<button type="button" v-on="{click:clicktwo,dblclick:dbl}">多個事件綁定</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					clicktwo(){
						console.log("clicktwo成功");
					},
					dbl(){
						console.log("輕按兩下也成功");
					}
				}
			})
		</script>

按鍵修飾符 

<div id="app">
			<p>鍵盤事件@keyup</p>         
			<input type="text" @keyup="show($event)"/>    <!-- 鍵盤擡起來時觸發 -->
			<p>鍵盤事件@keydown</p>
			<input type="text" @keydown="show($event)"/>	<!-- 鍵盤按下時觸發 -->
			<p>.enter</p>
			<input type="text" @keydown.enter="show($event)"/>  <!-- 按下回車時才會觸發 -->
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					show(e){
						console.log(e.keyCode)
						console.log(e)
					}
				}
			})
		</script>
           
vue中所有滑鼠事件
@click//單擊
@mousedown//按下
@mouseup//擡起
@dblclick//輕按兩下
@mousemove//移動
@mouseleave//離開
@mouseout //移出
@mouseenter//進入
@mouseover//在

11、使用key

v-for為什麼要加key

無key：key屬性，狀态預設綁定的是位置（index 下标）,有key時狀态根據key屬性綁定到的相應數組元素

綁定到的元素，建議用id （唯一辨別）

加key主要是為了高效的更新虛拟dom
           
<div id="app">
			<ul>
				<li v-for="item in msg"><input type="checkbox">{{item}}</li>
				<button type="button" @click="add">添加</button>
			</ul>
			
			<ul>
				<li v-for="item in msg" v-bind:key="item"><input type="checkbox">{{item}}</li>
				<button type="button" @click="add">添加</button>
			</ul>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				data:{
					msg:["a","b","c","d","e"]
				},
				methods:{
					add(){
						this.msg.splice(2,0,"f")
					}
				}
			})
		</script>

12、數組方法-響應式

因為Vue是響應式的，是以當資料發生變化時，Vue會自動檢測資料變化，視圖會發生對應的更新。

Vue中包含了一組觀察數組編譯的方法，使用它們改變數組也會觸發視圖的更新。

方法 描述
push() 向數組的末尾添加一個或更多元素，并傳回新的長度。
pop() 删除并傳回數組的最後一個元素
shift() 删除并傳回數組的第一個元素
unshift() 向數組的開頭添加一個或更多元素，并傳回新的長度。
splice() 删除元素，并向數組添加新元素。
sort() 對數組的元素進行排序
reverse() 颠倒數組中元素的順序。 
<div id="app">
			<ul>
				<li v-for=" u in users" :key="u">{{u}}</li>
				<button type="button" @click="add()">添加</button>
			</ul>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					users:["追夢","友誼","張寒"]
				},
				methods:{
					add(){
						// push()	向末尾添加元素
						// this.users.push("aaa","aa","bb")	
						
						//pop 
						// this.users.pop()
						
						// shift 删除數組中的第一個元素
						// this.users.shift()
						
						// unshift 從前面添加一個或多個元素
						// this.users.unshift("周周","多多")
						
						/* 
								splice : 删除元素、插入元素、替換元素
						 */
						
						// 删除元素  下标，删除幾個元素（如果沒有傳遞，就删除後面所有的元素）
						// this.users.splice(1,2)
						
						// 插入元素 下标，0，要插入的元素
						// this.users.splice(1,0,"周周","郎朗")
						// 替換  
						// this.users.splice(1,2,"周周","郎朗")
						
						// 注意通過索引值修改數組中的元素，視圖是不會更新。
						// this.users[1]="郎朗"
						
						// vue中的set方法
						// 全局 set方法
						// Vue.set(this.users,1,"郎朗")
						// 目前執行個體的 set的别名 (執行個體)
						this.$set(this.users,1,"郎朗")   //替換users裡下标為1的改為郎朗
					}
				}
			})
		</script>

通過之前所學所寫案例,結合了Bootstrap 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	</head>
	<body>
		<div id="app" class="container">
			<table class="table table-bordered table-hover">
				<caption class="h1 text-center text-info" colspan="5">使用者資訊表</caption>
				<tr>
					<th class="text-center text-danger" v-for="ths in arr">{{ths}}</th>
				</tr>
				<tr class="text-center" v-for="u,i in user" :key="u.id">
					<td>{{i+1}}</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model="u.name" style="width:50px;"/>
					<span v-show="u.mod">{{u.name}}</span>
					</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model="u.sex" style="width:50px"/>
					<span v-show="u.mod">{{u.sex}}</span>
					</td>
					<td>
					<input class="text-center" type="text" v-show="u.mod==false" v-model.number="u.age" style="width:50px"/>
					<span v-show="u.mod">{{u.age}}</span>
					</td>
					<td>
					<button type="button" class="btn btn-success btn-sm" v-show="u.mod==false" @click="rep(i)">确定</button>
					<button type="button" class="btn btn-default btn-sm" v-show="u.mod==false" @click="def1(i)">取消</button>
					<button type="button" class="btn btn-primary btn-sm" @click="modify(i)" v-if="u.flag" v-show="u.mod" :disabled="dis">修改</button>
					<button type="button" class="btn btn-warning btn-sm"  v-show="u.flag==false" @click="del(i)">确定</button>
					<button type="button" class="btn btn-default btn-sm"  v-show="u.flag==false" @click="def2(i)">取消</button>
					<button type="button" class="btn btn-danger btn-sm" @click="judge(i)" v-if="u.flag" v-show="u.mod" :disabled="dis">删除</button>
					</td>
				</tr>
				<tr>
					<td class="text-center" colspan="5" v-show="user.length==0">暫無資料....</td>
				</tr>
			</table>
			
			<form style="width:500px;margin:0 auto;border:2px solid gainsboro;padding:15px;">
			  <div class="form-group">
			    <label for="exampleInputEmail1">使用者名：</label>
			    <input type="text" class="form-control" v-model="newUser.name" placeholder="請輸入使用者名">
			  </div>
			  
			  <div class="form-group">
			    <label for="exampleInputEmail1">性别：</label>
			    <input type="text" class="form-control" v-model="newUser.sex" placeholder="請輸入性别">
			  </div>
			  
			  <div class="form-group">
			    <label for="exampleInputEmail1">年齡：</label>
			    <input type="text" class="form-control" v-model.number="newUser.age" placeholder="請輸入年齡">
			  </div>
			  
			  <div class="form-group">
			  	<button type="button" class="btn btn-primary" @click="add">添加</button>
				<button type="button" class="btn btn-danger" @click="newUser={}">重置</button>
			  </div>
			  
			</form>
			
			
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					dis:false,
					name1:"",
					sex1:"",
					age1:"",
					arr:["序号","姓名","性别","年齡","操作"],
					user:[
						{id:1,name:"花花",sex:"男",age:18,flag:true,mod:true},
						{id:2,name:"賈玲",sex:"女",age:35,flag:true,mod:true},
						{id:3,name:"沈騰",sex:"男",age:48,flag:true,mod:true},
					],
					newUser:{
						id:0,
						name:"",
						sex:"",
						age:'',
						flag:true,
						mod:true
					}
				},
				methods:{
					add(){
						//使用者名不能為空
						if(this.newUser.name===""){
							alert("請輸入使用者名");
							return;
						}
						//性别隻能為“男”或“女”
						if(!(this.newUser.sex==="男") && !(this.newUser.sex==="女")){
							alert("請輸入男或女");
							return;
						}
						//年齡不能小于0歲且不能超過120歲
						var ifage = parseInt(this.newUser.age);
						var strage = ifage.toString();
						// console.log(ifage);
						// console.log(strage);
						if(strage==="NaN"){
							alert("請輸入正确的年齡類型");
							return;
						}
						if(this.newUser.age<0 || this.newUser.age>120){
							alert("請輸入正确的年齡");
							return;
						}
						//key值綁定id号
						var idnum = 0;
						for(var i=0;i<this.user.length;i++){
							if(idnum<this.user[i].id){
								idnum=this.user[i].id
							}
						}
						this.newUser.id=idnum+1;
						this.user.push(this.newUser);
						this.newUser={};
						
						//使用者名小bug的解決
						this.newUser.name="";
						//預設為修改和删除顯示
						this.newUser.flag=true;
						//預設修改樣式不顯示
						this.newUser.mod=true;
					},
					modify(i){
						this.name1="";
						this.sex1="";
						this.age1="";
						this.name1=this.user[i].name;
						this.sex1=this.user[i].sex;
						this.age1=this.user[i].age;
						this.user[i].mod=false;
						this.dis=true;
						console.log(i);
					},
					rep(i){
						//修改時内容的判斷
						if(this.user[i].name===""){
							alert("請輸入使用者名");
							return;
						}
						if(!(this.user[i].sex==="男") && !(this.user[i].sex==="女")){
							alert("請輸入男或女");
							return;
						}
						var ifage = parseInt(this.user[i].age);
						var strage = ifage.toString();
						if(strage==="NaN"){
							alert("請輸入正确的年齡類型");
							return;
						}
						if(this.user[i].age<0 || this.user[i].age>120){
							alert("請輸入正确的年齡");
							return;
						}
						this.user[i].mod=true;
						this.dis=false;
					},
					def1(i){
						this.user[i].name=this.name1;
						this.user[i].sex=this.sex1;
						this.user[i].age=parseInt(this.age1);
						this.user[i].mod=true;
						this.dis=false;
					},
					judge(i){
						this.dis=true;
						this.user[i].flag=false;
						console.log(i);
						console.log(this.user[i].flag);
						// this.user[i].flag1=false;
						// this.user[i].flag2=true;
						// this.user.splice(i,1);
					},
					def2(i){
						this.user[i].flag=true;
						this.dis=false;
						// this.user[i].flag1=true;
						// this.user[i].flag2=false;
					},
					del(i){
						this.user.splice(i,1);
						this.dis=false;
					}
					
				}
				
			})
		</script>

	</body>
</html>
前端筆記 vue vue.js
上一篇: 前端雜談----vue pdf 預覽
下一篇: 為jquery.AutoComplete添加觸發事件

繼續閱讀