第一章 建議學習時間4小時 課程共3章
前面的nodejs教程並沒有停止更新，因為node項目需要用vue來實現界面部分，所以先插入一個vue教程，以免不會的同學不能很好的完成項目。
本教程，將從零開始，教給大家vue的基礎、高級操作、組件封裝等，再配合前面的Nodejs后台，實現一個完整的項目。
vue.js
官方介紹：Vue.js（讀音 /vjuː/，類似於 view） 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
其實，大家可以簡單理解為 ，vue是一個簡單、易用、功能強大的前端框架，在架構上先進於jQuery，但是實現的還是jQuery實現的功能（其實我們就是做個網頁，用什么框架都是干這些事情，只是用法不同而已）。
引入
可以去官網下載后，像引入jQuery一樣引入到html中即可，或者直接引入下面的在線鏈接
<script src="https://unpkg.com/vue/dist/vue.js"></script>
hello world
創建一個html文件，寫入如下代碼，即可顯示出 hello world （代碼解釋在后面）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="https://unpkg.com/vue/dist/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="box"> 11 <input type="text" v-model="msg"/> 12 {{msg}} 13 </div> 14 15 <script> 16 new Vue({ 17 el:"#box", 18 data:{ 19 msg:"hello world ! " 20 } 21 }) 22 </script> 23 24 </body> 25 </html>
顯示結果，當改變輸入框的時候，后面的值也跟着改變。
代碼解釋：
6行引入了 vuejs
16行使用 new Vue方法去聲明一個vue對象，內部傳入對應的配置，即可實現vue實例化
17 el 表示需要綁定的 vue范圍 （通常為標簽的 id ，需要加 # 號）
18 data 定義需要的所有數據，json格式，這里內部定義了一個名為 msg的值。
10行定義了一個id為 box的標簽 （此標簽用來標記哪個范圍內去執行vue的綁定代碼）
11行使用 v-model 給輸入框綁定數據 （輸入框綁定數據使用 v-model）
12行使用 {{}}雙花括號綁定數據，（一般的網頁標簽中，可以使用 雙花括號綁定數據）
上面就是實現了數據的雙向綁定。input --> js數據 --> 花括號msg 當input或 js中的值改變，三個地方的值都會全改變。、
各種輸入框的數據綁定：代碼解釋在對應的注釋中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ line-height: 30px; padding: 10px; } input[type="radio"],input[type="checkbox"]{ height: 20px; width: 20px; } input, select{ height: 30px; margin: 5px; padding-left: 5px; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> <p>單選框：</p> <input type="radio" value="a" v-model="raVal" name="sex" /> <input type="radio" value="b" v-model="raVal" name="sex" /> <!-- radio中 選中哪個 --> <p>復選框：</p> <input type="checkbox" v-model="cheVal[0]" /> <!-- check中，選中 為true 不選為 false 用value無意義 , 當js data中給值了，會自動轉化成 boolean再確定是否選中--> <input type="checkbox" v-model="cheVal[1]" /> <!-- check中，選中 為true 不選為 false 用value無意義 , 當js data中給值了，會自動轉化成 boolean再確定是否選中--> <p>輸入框：</p> <input type="text" v-model="msg"/> {{msg}}<br/> <p>下拉框</p> <select v-model="seVal" > <!-- 當選中某個選項，選項對應的 value值就會綁定給 seVal --> <option value="" selected>--chose--</option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <br/> {{raVal}}<br/> <!-- 顯示 單選框對應的值 --> {{cheVal}}<br/><!-- 顯示 復選框對應的值 --> 選擇的是：{{seVal}}<br/><!-- 顯示 下拉框對應的值 --> </div> <script> new Vue({ el:"#box", data:{ msg:"hello world ! ", raVal:"", //存放單選框對應的值 cheVal:["",""], //存放復選框對應的值 seVal:"" //存放下拉框對應的值 } }) </script> </body> </html>
v-show:當值為false的時候，隱藏dom, true的時候顯示dom
v-if:當值為false的時候，刪除dom(在頁面dom結構中找不到標簽)， true的時候顯示dom
<div id="box"> <div v-show="ifShow">示例：v-show</div> <div v-if="ifif">示例：v-if</div> </div> <script> new Vue({ el:"#box", data:{ ifShow:false, ifif:false } }) </script>
實現顯示隱藏的示例：代碼解釋在對應的注釋中
<div id="box"> <p>復選框：</p> <input type="checkbox" v-model="raVal" /> <!-- check中，選中 為true 不選為 false 用value無意義 , 當js data中給值了，會自動轉化成 boolean再確定是否選中--> <div v-show="raVal">時刻都要提升你的生產效率</div> </div> <script> new Vue({ el:"#box", data:{ msg:"hello world ! ", raVal:"", cheVal:["",""] } }) </script>
實現 class style src 的綁定：代碼解釋在對應的注釋中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ line-height: 30px; padding: 10px; } input{ height: 30px; margin: 5px; } .rColor{ color: red; } .div{ font-size: 30px; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> <div class="div" v-text="msg"></div> <div class="div" v-bind:class="{'rColor':cls}">哈哈哈哈1</div> <!-- json格式的判斷，鍵是需要顯示的字符串值，冒號后是判斷條件 true/false --> <div class="div" :class="{'rColor':cls}">哈哈哈哈2</div> <!-- 簡寫，省略v-bind 的簡寫也可以 --> <div class="div" :class="clsName">哈哈哈哈3</div> <!-- 簡寫，可以直接綁定 data中的某個數據 --> <div class="div" :style="{color:'blue'}">哈哈哈哈4</div> <!-- 簡寫，直接寫成json格式的style （這里和原來的style寫法一致，只是寫成了json格式，屬性名需采用駝峰式命名） --> <input type="text" v-model="cls"/> <br/> <img v-bind:src="url" alt=""/> <!-- 綁定src 值 這里的url對應的是 data中的 url--> </div> <script> new Vue({ el:"#box", data:{ msg:"呵呵呵", cls:true, clsName:"rColor", url:"https://pic2.zhimg.com/bc9733ea1_is.jpg" } }) </script> </body> </html>
遍歷數據顯示：使用v-for就能直接循環顯示 json數據或數組。代碼解釋在注釋中。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ line-height: 30px; padding: 10px; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> <div v-for="(item,index) in msg"> <!-- 數組循環 （值，索引） --> <i>{{index}} : {{item}}</i> </div> <div v-for="(item,key,index) in msg2"> <!-- json循環 （值，鍵，索引） --> <i>{{index}}:{{key}}:{{item}}</i> </div> </div> <script> new Vue({ el:"#box", data:{ msg:[["111","2222","333"],"bb","ccc"], msg2:{ name:"小明", age:"25", sex:"男" } } }) </script> </body> </html>
循環生成下拉選框，並和顯示的地方綁定。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ line-height: 30px; padding: 10px; } select{ width: 100px; padding: 5px; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> <select v-model="value"> <option v-for="opt in options" :value="opt.text">{{opt.value}}</option> <!-- 使用 :value綁定value屬性 --> </select> <span v-text="value"></span> </div> <script> new Vue({ el:"#box", data:{ options:[{text:"A",value:"A"},{text:"B",value:"B"},{text:"C",value:"C"},{text:"D",value:"D"}], value:"A" } }) </script> </body> </html>
今天就講到這里，明天我們講解：事件、組件，組件之間數據的傳遞
關注公眾號，博客更新即可收到推送
