Vue.js初探
一、簡介
1、定義：
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
2：MVVM（Model-View-ViewModel）,在常用的MVC（Model-View-Controller）模式的基礎上，增加了一層ViewModel，核心，它能夠實現數據驅動，也是常說的雙向綁定的前提：不僅View的更改可以反映到Model，Model的更改也可以反映到View，二者實現的前提也就是ViewModel把二者聯系起來了。
二、使用Vue.js
一個簡單的hello world的示例，讓你看清雙向綁定使用Vue.js的好處，直接上代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>vuejs</title> </head> <body> <!--這是view--> <div id="app"> {{message}} </div> <script src="js/vue.min.js" type="text/javascript"></script> <script type="text/javascript"> // 這是model var model={ message:"hello vue.js" }; // 這是ViewModel，vue實例 // 連接view和model new Vue({ el: '#app',//Vue實例掛載到id為app標簽上 data: model//數據來源於model對象 }); </script> </body> </html>
使用Vue的過程就是定義MVVM各個組成部分的過程的過程，如圖中注釋所示。
- 定義View
- 定義Model
- 創建一個View實例或"ViewModel"，它用於連接View和Model
雙向綁定演示：
1、從View改變，綁定更新到Model，如圖所示：
2、從Model改變，綁定更新到View，如圖所示：
三、Vue.js常用指令
上面用到的v-model是Vue.js常用的一個指令，那么指令是什么呢？
Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。
Vue.js提供了一些常用的內置指令，接下來我們將介紹以下幾個內置指令：
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
四、本篇參考及相關源碼
- 本篇參考1： Vue.js——60分鍾組件快速入門（上篇）
- 本篇參考2：Vue.js——60分鍾組件快速入門（下篇）
- Vue.js中文官網：http://cn.vuejs.org/
- Vue.js中文api文檔：http://cn.vuejs.org/api/
- Vue.js庫Github：https://github.com/vuejs/vue
- 本篇所有示例代碼均放在github開源：https://github.com/feibaraohui/vuejsdemo