vue學習指南：第二篇(詳細Vue基礎) - Vue的指令

1、 Vue 的介紹

1. vue是一個 mvvm 的框架。(面試官常常會問的)，angular 是 mvc的框架。

2. vm 是 vum 的實例，這個實例存在計算機內存中，主要幹兩件大事：

      1. 綁定數據

      2. dom檢測

3. vue 實例 靠 new 關鍵字實例化 vue 對象，使用 mvvm 模型

      1. M modal 數據

      2. v view 視圖

      3. vm 全稱viewmodal 就是一個vue實例

4. Vue.js 是封裝的一個類，參數是個 options 對象

最經常使用的屬性有哪些：

      1. el:」」 指定 vue所操做的 dom 範圍，屬性值是你獲取的節點

      2. data 就是 vue 的 model 存放數據的，屬性是一個對象或函數(在組件中是函數)

      3. methods 是vue 中的事件方法。都存在這裏面

2、Vue的指令

v-cloak=」」  v-text=」」  v-html=」」  指令學習

v-cloak=」」

      1. 使用v-cloak=」」 可以解決 插值表達式閃爍的問題

      2. 只要應用 v-cloak 這個屬性的元素默認 display:none;，請求過來數據才渲染到咱們的頁面。

 

v-text=「」

      1. 默認 v-text 沒有閃爍問題 <h4 v-text="meg"></h4>

      2. v-text 會覆蓋元素中本來的內容，可是 插值表達式 只會替換本身的佔位      符，不會把整個元素內容清空

 

<p v-cloak>+++++{{meg}}------</p>
<h4 v-text="meg">======</h4>

v-html=「」

      1. v-html=「」 會把標籤也一塊兒解析 <div v-html="msg2"></div>

 

v-bind=‘」

      1. v-bind 是 vue 中提供的用於動態屬性綁定的指令

      2. 簡寫 v-bind 指令 能夠簡寫爲一個 英文的冒號 : 要綁定的屬性

      3. v-bind 中 能夠寫合法的js表達式

    　<input type="button" v-bind:title="mytitle + '123' " value="按鈕" />

 

v-on=「」

      1. v-on 是事件綁定機制

      2. 每當我觸發 input 的點擊事件，會調用 vue 事件的綁定機制，執行這個       show方法，show去methods找這個方法。

    <input type="button" value="按鈕" v-on:mouseover="show" />

methods: {	//這個 methods屬性中定義了當前 vue 實例全部可用方法
		show:function () {
			alert("123")
		}
				
	}

      3. 簡寫 加 @ 符號

      <input type="button" value="按鈕" @click="show" />

var vm = new Vue({
        	el : "#app",	//指定控制的區域
        	data : {		//指定數據
            	meg : "123",
	    	msg2:"<h1>會亭好美吖！！！</h1>",
	    	mytitle:"這是一個本身定義的title"
        	},
})

　　

v-on 的修飾符：

      1. stop 阻止事件冒泡

 

<div class="inner" @click="divHand">
		<input type="button" value="打她" @click.stop="btnHand" />
</div>

什麼是冒泡？

      當給父子元素綁定同一個事件時，觸發子元素身上的事件，執行完畢後也會觸發父元素身上的事件，這種傳播機制叫事件冒泡

      2. prevent 阻止默認行爲

　<a href="http://www.baidu.com" @click.prevent="a">百度</a>

 

什麼是事件默認行爲？

      默認行爲是指像點擊<a href>標籤觸發的跳轉事件，阻止a無端刷新跳轉頁面。

　　3. capture 添加事件傾聽器使用事件捕獲模式。

 

<div class="inner" @click.capture="divHand">
	<input type="button" value="打她" @click.stop="btnHand" />
</div>

　　

 

什麼是事件捕獲？

      給父子元素使用 addEventListener() 綁定同一個事件時，當觸發子元素身上的事件，先觸發父元素身上的事件，而後在傳遞給子元素 這種傳播機制叫事件捕獲。

      4. self 只當事件在該元素自己(好比不是子元素)觸發時觸發回調，使用 .self       只有點擊當前元素的時候，纔會觸發事件處理函數

 

<div class="inner" @click.self="divHand">
		<input type="button" value="打她" @click.stop="btnHand" />
</div>

　　

　　5. once 事件只觸發一次

      <a href="http://www.baidu.com" @click.prevent.once="a">百度</a>

      6. .stop , .self 都是阻止事件冒泡，他倆有什麼區別？

      1. .self 只阻止本身身上的冒泡行爲的觸發，並不會真的 阻止冒泡行爲

 

<div class="outer" @click="div1Hand">
 	阻止了本身身上的冒泡行爲了，沒有阻止div1上的 self不能看成stop使用只管本身 
	<div class="inner" @click.self="div2Hand">
		<input type="button" value="打她" @click="btnHand" />
	</div>
</div>

　　

 

v-for=「」

      1. 循環指令 v-for，可循環的東西，數組和對象(item, index) in arr。先元素      在節點。

      注意：v-for循環的時候 key屬性只能使用number或string。

       注意：key 在使用的時候， 必須使用 v-bind 屬性綁定的形式，指定key的   值。Key是惟一的。

 

v-if 和 v-show

v-if 和 v-show的特色以及區別：

      1. v-if 的特色 每次會重新刪除或建立元素

    <h3 v-if="flag">這是用 v-if 控制的元素</h3>

      2. v-show 的特色 每次不會重新進行 dom 的刪除和建立操做，只是切換元      素的 display:none;樣式

      <h3 v-show="flag">這是用 v-show 控制的元素</h3>

 

什麼時間使用 v-if 和 v-show：

      v-if 有較高的切換 切換性能消耗

      v-show 有較高的初始渲染消耗

      若是 元素 涉及到頻繁切換 最好不要使用 v-if，而是推薦使用 v-show。

      若是 元素 可能永遠也不會被顯示出來 則推薦 使用 v-if

    data:{

         flag:true

    },

 

V-model 和 雙向數據綁定

      1. v-bind 只能實現數據的單項綁定，從msg自動綁定到 v-bind 中去，無      法實現數據的雙向綁定。

      2. 使用 v-model 指令能夠實現數據表單元素和 model中的數據的雙向數      據綁定，v-model 除了能實現數據從 m 渲染到 v-model中去，也能實現       v-model裏面數據改變同步到 msg 裏去。

<input type="text" name="" id="" v-model:value="msg" style="width:100% ;" />

 

注意：

       1. v-model 只能運用在表單元素中

       2. input(radio，text，address，email)

 

做者：晉飛翔

手機號(微信同步)：17812718961

但願本篇文章 能給正在學習 前端的朋友 或 以及工做的朋友 帶來收穫 不喜勿噴 若有建議 多多提議 謝謝！