感謝我們項目組給機會，讓我學了Vue.js，打開新世界大門。。。哈哈哈，也沒有那么誇張，不過學下來確實覺得入門還是蠻容易的。我大概前前后后學了有一個月的樣子，一開始只是比較急着可以寫東西出來，后來因為分配到九月份的分享，項目組也買了vue相關的書籍，所以又進行了比較深入的一個學習。
====================================================嘀 哩哩 哩~========================================================
按照慣例，我學習過程用到的資料：
1.vue官網：https://cn.vuejs.org/v2/guide/installation.html （官網已經很友好了，很有參考價值的）
2.簡書vue的入坑教程：http://blog.csdn.net/sinat_17775997/article/details/77824878 （拉到下面，開始看 入坑系列就可以了）
3.智能社陳瀟冰老師的vue視頻：鏈接：http://pan.baidu.com/s/1sla6lkh 密碼：72ep （老師講的很基礎，還不錯。我基本都聽完了，對vue有較好理解，不過老師是憑經驗講的，看完最好再看看書，就比較完美）
4.曾經超火的60分鍾入門 http://www.cnblogs.com/keepfool/p/5625583.html （里面的內容很詳細，不夠完美的地方是這個教程是基於vue1.x版本的，基礎的部分基本2.0也適用，但到過濾器這些部分會有比較大出入，當時我也是學到這里懵逼了棄了~有點可惜）
===================================================噠噠噠====分割=======================================================
學習Vue要准備的環境：
1.我用的是Sublime Text3 做編輯器 : 鏈接：http://pan.baidu.com/s/1dFITZnb 密碼：bwfy
2.安裝node.js (這個直接去官網下載安裝就可以了，到后面安裝腳手架vue-cli要用到的）傳送門：http://nodejs.cn/download/
=======================================================嘀嘀嘀======分割==================================================
現在我們開始正式一個坑一個坑學習vue
1.建立第一個vue頁面
准備：①下載vue.js (進入官網https://cn.vuejs.org/v2/guide/installation.html）選擇“開發版本”，點擊即可下載到vue.js
②打開sublime text3，新建一個html頁面。快速建立一個html頁面的快捷鍵（同時按住shift+ctrl+p，然后看到頂部會彈出框，輸入 sshtml ，按回車鍵，這時候雖然沒有看到什么變化，然后輸入感嘆號 ！ ，然后按 Tab 鍵。完成。如果沒出來，檢查輸入感嘆號 ！ 是不是英文輸入法）。
寫代碼：第一個vue頁面
效果圖：
代碼：(這是一個雙向數據綁定的案例）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue-Hello</title> </head> <body> <div id="app"> <p>{{message}}</p> <!-- 數據顯示 --> <input v-model = "message"> <!-- 綁定數據 --> </div> <script src="vue.js"></script> /*引入vue*/ <script> // vue實例 new Vue({ el:'#app', data:{ message:'Hello Vue!' /*message本體*/ } }) </script> </body> </html>
2.在vue頁面上練習一下vue的常用指令吧。
vue的常用指令有：（簡書上截圖過來的，更多指令在官網有：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
下面我們來挑幾個練練吧。
①v-bind（簡寫為 ：）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>v-bind</title> </head> <style> .red{ color: red; } .blue{ background: blue; } </style> <body> <div id="app" > <p :class="json">{{message}}</p> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ message:'bind', json:{ red:true, blue:true } } }); </script> </body> </html>
②v-on（簡寫為 @ ） + v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>v-on</title> </head> <body> <div id="app"> <input type="button" value="增加一個bb" v-on:click='add'></input> <ul> <li v-for='v in arr'>{{v}}</li> </ul> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ arr:['a','b','c'] }, methods:{ add:function(){ this.arr.push('bb'); } }, }); </script> </html>
③v-text、v-html這兩個都是渲染數據。這兩種方式跟我們直接用{{msg}}又有什么區別呢。
先來說說{{msg}}跟v-text
用法：
<div >{{msg}}</div>
<div v-text=”msg"></div>
data:{
msg:'hello,Liz'
}
上面兩個寫法都能渲染出msg里面的內容，當加載速度比較慢的時候，使用第一種寫法你在瀏覽器上可能會看到{{msg}},然后才看到渲染出來的數據hello,Liz，但是v-text就沒這個問題，你直接看到渲染出來的數據hello,Liz。
v-text跟v-html相比，v-html可以解析html標簽，舉個栗子
<div v-text="text"></div>
<div v-html="text"></div>
data:{
text:'<div>hello,liz</div>'
}
這時候v-text渲染出來就是<div>hello,liz</div>，但是v-html渲染出來的是hello，liz
-----------------------------------------------認真看應該明白這三者了吧，下面給代碼跑跑看----------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>v-text,v-html</title> </head> <body> <div id="app"> <!-- 這組對比{{msg}}和v-text用法 --> <div>{{msg}}</div> <div v-text="msg"></div> <!-- 這組對比v-html和v-text用法 --> <div v-text="text"></div> <div v-html="text"></div> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'hello,Liz', text:'<div>hello,liz</div>' } }); </script> </body> </html>
3.vue的生命周期，鈎子函數。左邊是官方給的圖例（看不清建議去官網看看），右邊是對鈎子函數的解釋。生命周期是蠻重要的，在后面的開發中你要控制你的事件、數據什么時候進行，都要用到。現在先理解一下，以后用的時候比較清晰。
示例代碼理解(運行的時候打開瀏覽器調試查看它的周期。調試快捷鍵F12，筆記本按 Fn+F12)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>life-cycle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' }, methods:{ update(){ this.msg='大家好'; }, destroy(){ this.$destroy(); } }, beforeCreate(){ console.log('組件實例剛剛被創建'); }, created(){ console.log('實例已經創建完成'); }, beforeMount(){ console.log('模板編譯之前'); }, mounted(){ console.log('模板編譯完成'); }, beforeUpdate(){ console.log('組件更新之前'); }, updated(){ console.log('組件更新完畢'); }, beforeDestroy(){ console.log('組件銷毀之前'); }, destroyed(){ console.log('組件銷毀之后'); } }); }; </script> </head> <body> <div id="box"> <input type="button" value="更新數據" @click="update"> <input type="button" value="銷毀組件" @click="destroy"> {{msg}} </div> </body> </html>
4.vue組件定義
核心部分，先要注冊組件。 Vue.component('組件名字',{內容}）;
然后在html中使用組件標簽。組件標簽就是你取的組件名字加上尖括號。 <組件名字></組件名字>
(這里解釋一下，template其實就是我注冊組件的時候里面的內容中的template，他們之間的關系通過 id="aaa"來維系。）
看看代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>component</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> // 注冊 Vue.component('my-component', { /*定義組件名稱和內容*/ template:'#aaa' /*調用id為aaa的模板*/ }); window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' } }); }; </script> </head> <body> <template id="aaa"> <div> <h3>我是組件</h3> </div> </template> <div id="box"> <my-component></my-component> <!-- 在頁面上使用組件標簽 --> {{msg}} </div> </body> </html>
5.過濾器
本來在vue1.x的版本中，自帶了很多好用的過濾器的，但是尤大大為了框架長久發展，決定刪除掉，全部交給開發者去自定義。這里就給一個自定義時間過濾器的實例。
我們在html中調用過濾器
然后在script中進行定義過濾器
代碼在這里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>草稿</title> </head> <body> <div id="app"> {{a | toDou}} <!-- 使用過濾器 --> </div> </body> <script src="vue.js"></script> <script> //自定義過濾- 時間過濾 Vue.filter('toDou',function(input){ var oDate = new Date(input); return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); }); new Vue({ el:'#app', data:{ a:Date.now() }, }); </script> </html>
===這里我們定義了組件，過濾器，小結一下。======
其實在vue頁面中定義你要的組件也好，過濾器也好，都是要通過vue實例調用這個方法的。總的套路就是
①。在script中定義：Vue.xxx = ('自定義名字',內容）
②。在html代碼中使用它
=================================================滴滴 噠~========================
到這里，基礎部分就暫告一段落了，是不是很簡單。下一篇我們來介紹如何用vue-cli來搭建一個工程項目。會有一個比較大的跨度噢~加油啦~biu~