自學vue筆記 (二) : 實例與生命週期

一: 什麼是實例

　　　　咱們說了，Vue 應用都應該從構建一個 Vue 實例開始。它管理着掛載在它身上的全部內容，所以實例是一個根實例， 全部的組件都應該掛載在根實例上面。建立一個 Vue 實例，須要經過 new 一個構造函數的方式，同時傳入一個對象。 該對象能夠傳入不少內容，驅動頁面的數據，模板，掛載的元素節點，方法，生命週期函數，子組件等。

　　

二:屬性和方法

每一個 Vue 實例都會代理其 data 對象裏的全部屬性，而且讓其做爲驅動頁面的數據。當 data 中的數據改變時，頁面也會響應式的發生改變

咱們看到，把 data 做爲 vm 實例中的 data 的屬性值，它們實際上是等價的。這裏就體現出一個問題，修改外面的 data 對象， 也會影響到 vm 實例中的 data。那麼爲了數據的安全，咱們不建議把 data 定義在外面。

 

三 : 頁面綁定方法:

　　　　1:小鬍子語法

　　　　小鬍子語法是咱們經常使用的綁定數據的方法。 以兩個大括號開始，以兩個大括號結尾，中間一般放 data 的屬性（也能夠放表達式，但除非特殊狀況不建議這麼操做），也就是將數據綁定到元素上。

　　　　

　　　　假設 id 爲 app 的節點已經被 vm 實例接管，這樣寫意爲，h1標籤被綁定了 vm.data 的 name 屬性， 該標籤在頁面上應該是以一級標題顯示的 name 的值。

 

　　　　2:響應式數據,v-m-vm 

　　　　當data的屬性的值發生改變時，頁面視圖將會產生「響應」，即匹配更新爲新的值。這個現象，咱們稱之爲響應式數據。 請打開控制檯，執行vm.name='HelloWorld'觀察頁面的變化。 另外，不止數據能夠影響頁面，頁面反過來也能夠影響數據，後面咱們能夠看到。

　　　　3:指令綁定

　　　　指令 (Directives) 是帶有v-前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。 指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。這裏有幾個指令經常使用語綁定數據到頁面

　　　　

• v-text：直接寫在 DOM 元素上，指令值是 data 中的屬性，<div v-text="message"></div>與<div></div>是等價的。這裏要提到一點，若是綁定的值是一個 html 標籤，那麼它是會被轉義的。若是的確想展現的數據是被做爲 html 模板編譯過的話，請使用v-html
• v-html：與v-text同樣的做用，可是與其不一樣的是，當咱們綁定的數據是<h1>123</h1>的話，那麼展現的數據會是一級標題格式的 123。這麼作具備風險，容易致使 XSS 攻擊，Vue 官方也寫道只在可信內容上使用v-html，永不用在用戶提交的內容上。
• v-bind：一般，咱們須要在頁面的元素上綁定 data 屬性做爲元素的屬性的時候，就使用這個指令，這個指令很經常使用，基本在綁定屬性的時候都會出現。它有一個簡寫:屬性名，<div :name="name"></div>，這樣寫的含義就是，給 div 綁定一個 name 屬性，它的屬性值就是 data 中的 name 屬性值。
• v-for：基於源數據屢次渲染元素或者模板，前提是實例的 data 中提供的數據可以被遍歷。<li v-for="(item, index) in list"></li>，這麼寫的意爲，遍歷 list，item 是遍歷的每一項，而 index 是遍歷每一項的時候，它的索引值。這麼遍歷出來的內容，能夠重複渲染li標籤到頁面上，但它的數據如何展現在於你的代碼，示例用小鬍子語法簡單展現了 item 項。
• v-model：這是一個極具特色的指令，它提供了雙向的數據綁定，一般用在用戶輸入的元素上，以作到頁面與數據的相互影響。<input v-model="content"/>，input 框會展現 content 的值，input 的值改變，content 的值也會改變。

 

 

 

　　注意!!!!

　　　　

　　　　4:方法:

　　　　方法，就是定義在vm實例中的 methods 中的邏輯代碼。它一般用來處理 data 中的屬性或者其餘組件傳遞過來的屬性。具體咱們之後展開來說，須要知道的是：vm 實例中的 this 指向是 vm 實例自己，所以，當 methods 中的方法須要操做 vm 中的屬性時，須要使用 this 來指向 vm 來獲取　　

　　四:生命週期函數

　　　　

　　　　1 :官方生命週期函數解釋

　　　　　　

　　　　

這實際上是一個很明瞭的流程圖，咱們拆開來看流程（僅作理解，不夠專業）。

1. 經過構造函數，建立了一個實例
2. 實例開始初始化，在初始化以前會執行beforeCreate函數
3. 實例初始化結束後，會執行created函數
4. 這個時候會作一個判斷，要將實例掛載的元素根節點是否存在？若是存在的話，執行下一步，若沒有，則等掛載元素的函數被調用
5. 接下來判斷是否有模板設置？有的話就將模板放到render函數中，若是沒有的話，就將掛載的根節點做爲模板。
6. 如今開始掛載，在掛載以前，會自動執行beforeMount函數。以後就開始將實例掛載在元素節點上。
7. 在掛載後，自動執行mounted函數，這個時候，咱們能夠看到若是掛載後，數據發生變化，會促使兩個函數beforeUpdate和updated自動執行，一個在從新渲染頁面以前執行，一個從新渲染後執行。
8. 當實例被銷燬的時候，也會在銷燬前自動執行beforeDestroy函數和銷燬以後的destroyed函數。