vue生命周期、vue實例、模板語法

vue從出生到現在，從一個默默小眾型的框架發展成為現在國內的三大框架之一，也從最初的版本到現在的2.5.13(穩定版 截止2018.1.26日 2014到2018)。

正題

Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。

由于在前面博客里面我介紹了vue的安裝還有關于webpack的基本配置，那這篇文章我問就說介紹vue、以及vue的使用。

如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。

當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。

如果您覺得本篇內容不錯，請點個贊，后續我會把demo傳到github上，覺得可以請點贊，謝謝。

干貨

如果你想學vue請具備 HTML、CSS 和 JavaScript 的中級知識。
如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。(官網原話)。

1、第一步、vue生命周期表

學好vue生命周期表是絕對要看懂的

將官網生命周期圖示進行注解，以加深印象和理解(來源網絡圖附上地址)

2、vue實例

每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：

var vm = new Vue({
 // 選項
})

3、實例生命周期鉤子

每個 Vue 實例在被創建時都要經過一系列的初始化過程——比如在設置數據綁定、方法傳參將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在過程中也就運行了一些叫做生命周期鉤子的函數，可以在不同的階段添加自己的代碼的機會。

比如 mounted 鉤子可以用來在一個實例被創建之后執行代碼：

new Vue({
 data: {
 a: 1
 },
 mounted: function () {
 // `this` 指向 vm 實例
 console.log('a is: ' + this.a)
 }
})
// => "a is: 1"

也有一些其它的鉤子，在實例生命周期的不同階段被調用，如updated 和 destroyed。生命周期鉤子的 this 上下文指向調用它的 Vue 實例。

3、模板語法

Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數減到最少。

如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。(官網原話)

3.1、文本插值

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

vue是默認的雙向綁定，若不想雙向綁定，一次性數據的請用指令 v-once 指令，不過請小心影響到該節點上所有的數據綁定：

<span v-once>這個將不會改變: {{ msg }}</span>

3.2、原始 HTML

雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

3.3、使用 JavaScript 表達式

迄今為止，在vue的模板中，vue一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

3.4、指令

指令 是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式 (v-for 是例外情況)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM?；仡櫸覀冊诮榻B中看到的例子

<p v-if="seen">現在你看到我了</p>

v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

3.4.1、 參數

一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應式地更新 HTML 屬性：

<a v-bind:href="url">...</a>

在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。
另一個例子是 v-on 指令，它用于監聽 DOM 事件：

<a v-on:click="doSomething">...</a>

在這里參數是監聽的事件名。我們也會更詳細地討論事件處理。

3.4.2、縮寫

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue.js 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那么重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind縮寫:

<!-- 完整語法 --><a v-bind:href="url">...</a><!-- 縮寫 --><a :href="url">...</a>

v-on縮寫:

<!-- 完整語法 --><a v-on:click="doSomething">...</a><!-- 縮寫 --><a @click="doSomething">...</a>

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于特性名來說都是合法字符，在所有支持 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中?？s寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

相關閱讀：

一次前端面試的經歷

前端微信分享jssdk config:invalid signature 簽名錯誤的解決方法

前端入門之css3

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com