寫在最前面
一直都想在更新博客但是都因?yàn)閼蟹艞壛?看了無問西東之后找了點(diǎn)正能量,更新起來
vue從出生到現(xiàn)在，從一個(gè)默默小眾型的框架發(fā)展成為現(xiàn)在國內(nèi)的三大框架之一，也從最初的版本到現(xiàn)在的2.5.13(穩(wěn)定版 截止2018.1.26日 2014到2018)。
正題
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
由于在前面博客里面我介紹了vue的安裝還有關(guān)于webpack的基本配置，那這篇文章我問就說介紹vue、以及vue的使用。
如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM，學(xué)習(xí)Vue.js時(shí)請先拋開手動(dòng)操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動(dòng)的，你無需手動(dòng)操作DOM。它通過一些特殊的HTML語法，將DOM和數(shù)據(jù)綁定起來。一旦你創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會(huì)相應(yīng)地更新。
當(dāng)然了，在使用Vue.js時(shí)，你也可以結(jié)合其他庫一起使用，比如jQuery。
如果您覺得本篇內(nèi)容不錯(cuò)，請點(diǎn)個(gè)贊，后續(xù)我會(huì)把demo傳到github上，覺得可以請點(diǎn)贊，謝謝。
干貨
如果你想學(xué)vue請具備 HTML、CSS 和 JavaScript 的中級知識。
如果你剛開始學(xué)習(xí)前端開發(fā)，將框架作為你的第一步可能不是最好的主意——掌握好基礎(chǔ)知識再來吧！之前有其它框架的使用經(jīng)驗(yàn)會(huì)有幫助，但這不是必需的。(官網(wǎng)原話)。
1、第一步、vue生命周期表
學(xué)好vue生命周期表是絕對要看懂的
將官網(wǎng)生命周期圖示進(jìn)行注解，以加深印象和理解(來源網(wǎng)絡(luò)圖附上地址)
2、vue實(shí)例
每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的：
var vm = new Vue({
// 選項(xiàng)
})
3、實(shí)例生命周期鉤子
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——比如在設(shè)置數(shù)據(jù)綁定、方法傳參將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在過程中也就運(yùn)行了一些叫做生命周期鉤子的函數(shù)，可以在不同的階段添加自己的代碼的機(jī)會(huì)。
比如 mounted 鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：
new Vue({
data: {
a: 1
},
mounted: function () {
// `this` 指向 vm 實(shí)例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如updated 和 destroyed。生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實(shí)例。
3、模板語法
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在底層的實(shí)現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)，Vue 能夠智能地計(jì)算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。
如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數(shù)，使用可選的 JSX 語法。(官網(wǎng)原話)
3.1、文本插值
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標(biāo)簽將會(huì)被替代為對應(yīng)數(shù)據(jù)對象上 msg 屬性的值。無論何時(shí)，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。
vue是默認(rèn)的雙向綁定，若不想雙向綁定，一次性數(shù)據(jù)的請用指令 v-once 指令，不過請小心影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定：
<span v-once>這個(gè)將不會(huì)改變: {{ msg }}</span>
3.2、原始 HTML
雙大括號會(huì)將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要對用戶提供的內(nèi)容使用插值。
3.3、使用 JavaScript 表達(dá)式
迄今為止，在vue的模板中，vue一直都只綁定簡單的屬性鍵值。但實(shí)際上，對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
3.4、指令
指令 是帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況)。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。回顧我們在介紹中看到的例子
<p v-if="seen">現(xiàn)在你看到我了</p>
v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來插入/移除 <p> 元素。
3.4.1、 參數(shù)
一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應(yīng)式地更新 HTML 屬性：
<a v-bind:href="url">...</a>
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定。
另一個(gè)例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">...</a>
在這里參數(shù)是監(jiān)聽的事件名。我們也會(huì)更詳細(xì)地討論事件處理。
3.4.2、縮寫
v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當(dāng)你在使用 Vue.js 為現(xiàn)有標(biāo)簽添加動(dòng)態(tài)行為 (dynamic behavior) 時(shí)，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會(huì)感到使用繁瑣。同時(shí)，在構(gòu)建由 Vue.js 管理所有模板的單頁面應(yīng)用程序 (SPA - single page application) 時(shí)，v- 前綴也變得沒那么重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡寫：
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 的瀏覽器都能被正確地解析。而且，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中?？s寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會(huì)慶幸擁有它們。
