一、背景
MVVM模式，很多人在說在用，好吧，我落後了，我目前的項目木有用到MVVM模式的框架，vuejs，reactjs，angularjs，nonono，自己去搗鼓過ng，項目木有用到。實在不敢稱自己是front-end developer。趁這個失業期，vuejs的學習起喲。
二、簡介
1、vue.js是什麼
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
中文文檔地址：https://cn.vuejs.org
2、熱得飛起的MVVM是什麼
MVVM（Model-View-ViewModel）,在常用的MVC（Model-View-Controller）模式的基礎上，增加了一層ViewModel，核心，它能夠實現數據驅動，也是常說的雙向綁定的前提：不僅View的更改可以反映到Model，Model的更改也可以反映到View，二者實現的前提也就是ViewModel把二者聯繫起來了。注意啦，view和model的相互更改相互影響，也就是雙向綁定啦。
舉個栗子：
代碼如下
<!-- 這是view --> <div id="app"> {{ message }} </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript"> // 這是 model var model = { message: 'hello vue.js' }; // 這是view實例，鏈接view和model之間 new Vue({ el: '#app', // 實例掛載到#app的標籤上 data: model // 數據來源於model對象 }) </script>
view model之間的關係用一張微妙的圖顯示，圖片來源於網絡。
三、開始熟悉vue.js的語法
女司機要開車了，找個地方躲好，我可是隨時會把油門當剎車的銀，嘻嘻，寫幾個小demo。
1、vuejs允許採用模板式的將數據渲染進DOM的系統。
<div class="app">
{{ message }} output: hello vue.js
</div>
js:
var app = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
}
});
打開瀏覽器瀏覽時，此時vue已經把數據和dom綁定在一起了，在console修改app.message = 'hello',會看到div裏面的數據改變。
網絡找的圖，根據上面的代碼應該是app.message ='hello',test 一下就明白。
使用方法：
生成一個vue實例，掛在在某個標籤下，就可以使用vuejs了。nice~
2、條件與循環
很有意思，這些指令都是v-開頭的，跟angular一樣，用ng-開頭。一種特徵吧。
v-if=
v-for=
3、v-on：監聽事件
舉個栗子，翻轉hello vue.js!
<div id="app-5"> <p>{{ message }}</p> <button v-on:click=reverseMessage>ReverseMessage</button> </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript"> var app5 = new Vue ({ el: '#app-5', data: { message: 'Hello Vue.js' }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join(''); } } }); </script>
4、v-model雙向綁定的栗子：
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"/> </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript"> var app6 = new Vue ({ el: '#app-6', data: { message: '' } }); </script>
注意哦，v-model這個指令只能用在 <input> , <select> , <textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新爲相同的數據。
初印象到這裏結束，明天繼續學習，理解不對的地方請斧正，謝謝！