vue學習筆記系列（二）

動手第一個demo

我們多少都會了解vue的核心就是資料，實作了資料的雙向綁定。話不多說先上代碼：

<div>
	<input  type="text" v-model="name" placeholder="請輸入你的名字">
	<h1>你好，{{name}}</h1>
</div>

<script>
	var app = new Vue({
		el:'#app',
		data:{
			name:''	
		}
	})
</script>
           

此時輸入的表單的資料就會自動綁定到name這個值上面去，然後顯示到頁面上。

1 、 Vue執行個體與資料綁定

建立執行個體，這裡的構造函數Vue就建立了一個app執行個體

var app = new Vue({
	el:'#app',
	data:{
		name:''	
	}
})
           

必不可少的就是el，用于指定一個已存在的DOM元素來挂載Vue執行個體，挂載成功後我們可以通過app.$el來通路該元素。Vue執行個體本身代理了data對象裡的所有屬性：

var myData={
	a:1
}

var app = new Vue({
	el:'#app',
	data:{
		myData
	}
})
console.log(app.a)   //1
app.a=2;
console.log(myData.a);  //2
myData.a=3;
console.log(app.a);  //3

           

以上例子可以說明，顯式聲明的資料指向一個已有的變量，并且它們之間預設建立了雙向綁定，修改任意一個另一個就會跟着改變。

2 、 生命周期

1. beforeCreate：在執行個體初始化之後，資料觀察者（data observer）和event/watcher事件配置之前調用。
2. created：執行個體建立完成後立即調用。執行個體已完成資料觀察者的運算，watch/event事件回調。然而，挂載階段還沒開始，

   $el

   屬性不可見。
3. beforeMount：在挂載開始之前調用，相關的render函數首次調用。
4. mounted：el被新建立的

   vm.$el

   替換，并且挂載到執行個體上之後再調用該鈎子。如果root執行個體挂載了一個文檔内元素，當調用mounted時vm.$el也在文檔内。
5. beforeUpdated：在資料更新時調用，發生在虛拟DOM重新渲染和打更新檔之前。
6. updated：由于資料更改導緻的虛拟DOM重新渲染和打更新檔，在這之後會調用該鈎子。
7. beforeDestroy：執行個體銷毀之前調用，此時執行個體完全可用。
8. destroyed：執行個體銷毀後調用，執行個體訓示的所有東西都接觸綁定，所有的事件監聽器會被移除，子執行個體也會被銷毀。
9. activated：keep-alive元件激活時調用。
10. deactivated：keep-alive元件停用時調用。
11. ErrorCapture：捕獲一個來自子孫元件錯誤時調用。

5和6這兩個不常用，且不推薦使用

3 、指令和事件

• v-if
• v-for
• v-show
• v-on
• v-model
• v-bind
• v-html

上面的指令為常用的指令，下面就來說一下它們的差別和用法：

1. v-if 和 v-show的差別：v-show是CSS級别的display:none;和display:block;之間的切換，而v-if 決定是否顯示代碼塊的内容，是屬于DOM級别的操作。頻繁操作時使用v-show，一次性渲染完成的時候選擇v-if。對于v-if的優化，由于v-if為false的時候内部元件是不會渲染的，是以在特定時候需要渲染元件的時候（或異步，如

   $nextTick

   是在下次更新循環結束之後延遲執行回調，用于獲得更新後的DOM）設定為true，優先渲染其他内容。
2. v-bind用于動态更新HTML元素上的屬性，如id、class等。而v-on表示給元素綁定一個點選事件，可以是原生的事件，如果綁定原生事件則需要

   @click.native

   這樣寫。它們的文法糖（簡寫）為：bind和 @click
3. v-model主要是實作資料的雙向綁定的，用于表單元素上。
4. v-html主要是解析HTML文檔，防止以字元串形式解析出來。

ps：筆者最近開通了微信公衆号，大家可以關注一下哦，謝謝大家的支援！