天天看點
傳回

Vue（一）（Vue和jQuery對比，基本指令，事件，計算屬性，監聽）

什麼是Vue？

  • 概念：漸進式JavaScript架構
  • 作用：動态構件使用者界面
  • 特點：前端js庫，是一個精簡的MVVM，它專注于MVVM模型的viewModel層，**通過雙向資料綁定吧view和model層連接配接起來，**通過對資料的操作就可以完成對頁面視圖的渲染。

Vue和jQuery對比

  • jQuery：是使用選擇器來選取DOM對象，對其進行指派，取值，事件綁定等操作，其實和原生的HTML的差別是在于可以友善的選取和操作DOM對象，而資料和界面是在一起的。比如需要擷取label标簽的内容：$(“lable”).val()，它還是依賴DOM元素的值。
  • Vue：則是通過Vue對象将資料和View完全分離開了，對資料進行操作不再需要引用相應的DOM對象，可以說資料和View是分離的，他們通過Vue對象實作view層和model層互相的綁定，這就是MVVM模式。

一.Vue的特點

1.虛拟DOM
運作js的速度是很快的，大量的操作DOM就會很慢，時常在更新資料後會重新渲染頁面，這樣造成在沒有改變資料的地方重新渲染了DOM節點，這樣就造成了很大程度上的資源浪費。
利用在記憶體中生成與真實DOM與之對應的資料結構，這個在記憶體中生成的接口稱為虛拟DOM。
當資料發生變化時，能夠智能地計算重新渲染元件的最小代價并應用到DOM操作上。
2.Vue執行個體

每一個應用都是通過Vue這個構造函數建立根執行個體來啟動Vue對象。對象包括挂載元素，資料，模闆，方法等。

el：挂載元素選擇器
data:代理資料
methods：定義方法

二 .Vue的使用

1.指令

Vue中指令的職責就是當其表達式的值改變時相應地将某些行為應用到DOM上，指令以 v-開頭。

常用指令

  • v-model：是作用于input/textarea等表單控件的雙向資料綁定指令，當我們修改表單元素的内容，會自動的更新vue中的資料。
  • v-show:稱為Vue中的條件渲染，它可以控制元素的隐藏和顯示：通過元素的display屬性值去控制。
  • v-if / v-else / v-else-if：也屬于Vue中的條件渲染指令，作用于同v-show一樣用于控制元素的顯示和隐藏，不一樣的是v-if的js表達式為假時，元素不會存在于DOM文檔中的。
  • 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="box">
			使用者名:<input type="text" name="username" id="" value="" v-model="name" />
			<h1 v-show="show">我是一段文本，會被顯示</h1>
			<h1 v-show="hide">我是一段文本，會被隐藏</h1>
			<input type="text" name="" id="" value="" placeholder="輸入你的成績" v-model="score" />
			<h1 v-if="score>=80&&score<=100">優秀</h1>
			<h1 v-else-if="score>=60&&score<80">及格</h1>
			<h1 v-else-if="score<60">不及格</h1>
			<h1></h1>
			<ul v-for="obj in Arr">
				<li>{{obj.username}}&nbsp;{{obj.age}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				name:'張三',
				show:true,
				hide:false,
				score:0,
				Arr:[{
					'username':'張三',
					'age':19
				},
				{
					'username':'李四',
					'age':29
				},
				{
					'username':'王老虎',
					'age':24
				}]
			}
		})
	</script>
</html>

2.事件

（1）事件的綁定

Vue中，綁定事件采用@+事件屬性名的方式，例如：@click點選事件。

（2）案例示範

<!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="box">
			<!-- @click.prevent的方式可以阻止a标簽的跳轉 
			     @click.stop 阻止冒泡
				 @click.once 事件隻觸發一次-->
			<a href="v-if.html" @click.prevent="show()">點選</a>
			<!-- @keypress.enter Enter鍵
			      .delete 删除鍵-->
			輸入資訊:<input type="text" name="msg" id="" value="" placeholder="請輸入内容" @keypress.enter="show1()"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				
			},
			methods:{
				show(){
					alert("a标簽阻止跳轉")
				},
				show1(){
					alert("正在搜尋")
				}
			}
		})
	</script>
</html>

3.計算屬性computed

（1）概念

計算屬性就是當其依賴屬性的值發生變化時，這個屬性的值會自動更新，與之相關的DOM部分也會同步自動更新。

（2）案例示範

<!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="box">
			姓:<input type="text" name="" id="" value="" v-model="xing"/>
			名字:<input type="text" name="" id="" value=""v-model="ming" />
		    全名:<input type="text" id="" value="" v-model="fullname" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				xing:'',
				ming:''
			},
			//計算屬
			computed:{
				fullname:{
					//get函數中的屬性一變化，這個get就調用
					get:function(){
						return this.xing+' '+this.ming
					},
					//fullname值發生變化 set方法就會被調用
					set:function(newValue){
						var arr=newValue.split(' ');
						this.ming=arr[0];
						this.xing=arr[1];
					}
				}
			}
		})
	</script>
</html>

4.屬性值變化的監聽watch

（1）概念

它是用來監測Vue執行個體上的資料變動

（2）案例示範

<!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="jisuan">
			<input type="text" name="" id="" value="" placeholder="請輸入姓" v-model="xing" /><br>
			<input type="text" name="" id="" value="" placeholder="請輸入名" v-model="ming" /><br>
			<input type="text" id="" value="" v-model="name" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#jisuan",
			data:{
				xing:'王',
				ming:'老五',
				name:'王 老五'
			},
			watch:{
				//name變化 ming和xing跟着變化 
				name:function(changename){
					var name=changename.split(' ');
					this.xing=name[0];
					this.ming=name[1];
				},
				//ming和xing變化 name跟着變化
				 xing:function(changexing){
					 this.name.split(' ')[0]=changexing
				 },
				 ming:function(changeming){
					 this.name.split(' ')[1]=changeming
				 } 
			}
		})
	</script>
</html>
JavaEE vue
上一篇: Vue入門（二）——基本文法群組件
下一篇: Vue入門（二）—— vue項目建立

繼續閱讀