一、實例與數據
Vue.js 應用的創建很簡單，通過構造函數 Vue 就可以創建一個 Vue 的根實例，並啟動 Vue 應用：
var app = new Vue ({
//選項
})
變量 app 就代表了這個 Vue 實例。事實上，幾乎所有的代碼都是一個對象，寫入 Vue 實例的選項內的。首先，必不可少的一個選項就是 el 。el 用於指定一個頁面已存在的 DOM 元素來掛載 Vue 實例，它可以是 HTMLElement ，也可以是 CSS 選擇器，比如：
var app = new Vue({
el: document.getElementById('app') // 或者 el：'#app'
})
掛載成功後，可以通過 app.$el 來訪問該元素。Vue 提供了很多常用的實例屬性與方法，都以 $ 開頭，比如 $el 。
Vue.js 最核心功能：數據的雙向綁定 —— {{ name }}
上述代碼，在 input 標籤上，有一個 v-model 的指令，它的值對應於創建的 Vue 實例的 data 選項中的 name 字段，這就是 Vue 的數據綁定。通過 Vue 實例的 data 選項，可以聲明應用內需要雙向綁定的數據。建議所有會用到的數據都預先在 data 內聲明，這樣不至於將數據散落在業務邏輯中，難以維護。
Vue 實例本身也代理了 data 對象裡的所有屬性，故可以這樣訪問：
var app = new Vue({
el: "#app",
data: {
a: 1
}
})
sonsole.log(app.a); //1
除了顯式地聲明數據外，也可以指向一個已有的變量，並且它們之間默認建立了雙向綁定，當修改其中任意一個時，另一個也會一起變化：
var myData = {
a: 1
}
var app = new Vue({
el: "#app",
data: {
a: myData
}
})
sonsole.log(app.a); // 1
// 修改屬性，原數據也會隨之修改
app.a = 2;
console.log(myData.a); // 2
// 反之，修改原數據，Vue 屬性也會修改
myData.a = 3;
console.log(app.a); // 3
二、生命週期
每個 Vue 實例創建時，都會經歷一系列的初始化過程，同時也會調用相應的生命週期鉤子，我們可以利用這些鉤子，在合適的時機執行我們的業務邏輯。如果你使用過 jQuery ,一定知道它的 ready() 方法，比如：
$(document).ready(function() {
// DOM 加載完後，會執行這裡的代碼
});
Vue 的生命週期鉤子與之類似，比較常用的有：
- created : 實例創建完成後調用，此階段完成了數據的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些數據時會比較有用。
- mounted : el 掛載到實例上後調用，一般我們的第一個業務邏輯會在這裡開始。
- beforeDestroy : 實例銷燬之前調用。主要解綁一些使用 addEventListener 監聽的事件等。
這些鉤子與 el 和 data 類似，也是作為選項寫入 Vue 實例內，並且鉤子的 this 指向的是調用它的 Vue 實例：
var app - new Vue({
el: '#app',
data: {
a: 2
},
created: function () {
console.log(this.a); // 2
}
mounted: function () {
console.log(this.$el); //
}
})
三、插值與表達式
使用雙大括號（ Mustache 語法 ）“ {{ }} ” 是最基本的文本插值方法，它會自動將我們雙向綁定的數據實時顯示出來，例如實時顯示當前時間，每秒更新：
雙大括號裡的內容會被替換為 data 選項中 date 的值，通過任何方法修改數據 data 選項中 date 的值，雙大括號的內容都會被實時替換。這裡的 {{ date }} 輸出的是瀏覽器默認的時間格式，並非格式化的時間（ 2018-10-07 10:05:59 ），所以需要注意時區。有多種方法可以對時間格式化，比如賦值前先使用自定義的函數處理。當然，Vue 的過濾器 （ filter ）或計算屬性 （ computed ）也可以實現。
如果有時候就是想輸出 HTML，而不是將數據解釋後的純文本，可以使用 v-html：
link 的內容將會被渲染為一個具有點擊功能的 a 標籤，而不是純文本。但是要注意，如果將用戶產生的內容使用 v-html 輸出後，有可能導致 XSS 攻擊（跨站腳本攻擊），所以要在服務端對用戶提交的內容進行處理，一般可將尖括號 “<>” 轉義。
如果想顯示 {{ }}標籤，而不進行替換，使用 v-pre 即可跳過這個元素和它的子元素的編譯過程，例如：
{{ 這裡會顯示雙花括號，內容不會被編譯 }}
在 {{ }} 中，除了簡單的綁定屬性值外，還可以使用 JavaScript 表達式進行簡單的運算、三元運算等，例如：
{{ num / 100 }}
{{ areYouOK ? '確定' : '取消' }}
{{ text.split(',').reverse().join(',') }}
顯示結果依次為：1、取消、456,123 。
Vue.js 只支持單個表達式，不支持語句和流控制。另外，在表達式中，不能使用用戶自定義的全局變量，只能使用 Vue 白名單內的全局變量，例如 Math 和 Date 。以下是一些無效的示例：
{{ var text = '123,456' }}
{{ if (areYouOK) return msg }}
四、過濾器
Vue.js 支持在 {{ }} 插值的尾部添加一個管道符“ （ | ） ” 對數據進行過濾，經常用於格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的，通過給 Vue 實例添加選項 filters 來設置，例如可以對時間進行格式化處理，實時顯示當前時間：
{{ date | formatDate }}
過濾器也可以串聯，而且可以接收參數，例如：
{{ message | filterA | filterB }}
{{ message | filterA('arg1', 'arg2') }}
過濾器應當用於處理簡單的文本轉換，如果要實現更為複雜的數據變換，應該使用計算屬性。
這些技術如何學習，有沒有免費資料？
對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！
閱讀更多 前端攻城小牛 的文章
