vue01
1.1 vue.js庫的下載
vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月發佈的。css
另外幾個常見的工具庫：react.js /angular.jshtml
官方網站：前端
中文：https://cn.vuejs.org/vue
英文：https://vuejs.org/python
官方文檔：https://cn.vuejs.org/v2/guide/react
vue.js目前有1.x、2.x和3.x 版本，咱們學習2.x版本的。git
1.2 vue.js庫的基本使用
在github下載：https://github.com/vuejs/vue/releasesgithub
在官網下載地址： https://cn.vuejs.org/v2/guide/installation.htmlweb
vue的引入相似於jQuery，開發中能夠使用開發版本vue.js，產品上線要換成vue.min.js。json
下圖是github網站下載的vue.js目錄
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1. 引入vue --> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>3. 經過vue對象提供的指令顯示內容到html網頁中</p> <h1>{{message}}</h1> <p @click="num+=1">{{num}}</p> 數值： <input type="text" v-model="num"> </div> <script> // 2. 建立vue對象,Vue首字母大寫的 let vm = new Vue({ el:"#app", // 當前vue對象能夠操做的頁面範圍，通常就是ID元素的選擇符 data:{ // 當前vue對象要輸出到html頁面中的數據 message:"登陸錯誤!", num: 10084, } }); </script> </body> </html>
總結：
1. vue的使用要從建立Vue對象開始
var vm = new Vue();
2. 建立vue對象的時候，須要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
var vm = new Vue({
el:"#app",
data: {
數據變量:"變量值",
數據變量:"變量值",
數據變量:"變量值",
},
});
el:設置vue能夠操做的html內容範圍，值就是css的id選擇器。
data: 保存vue.js中要顯示到html頁面的數據。
3. vue.js要控制器的內容外圍，必須先經過id來設置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
1.3 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue對象的data屬性裏面的數據。這裏的數據要顯示到頁面中。
View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之爲「視圖模板」 。
ViewModel 指代的是vue.js中咱們編寫代碼時的vm對象了，它是vue.js的核心，負責鏈接 View 和 Model，保證視圖和數據的一致性，因此前面代碼中，data裏面的數據被顯示中p標籤中就是vm對象自動完成的。
編寫代碼，讓咱們更加清晰的瞭解MVVM：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script> window.onload = function(){ // 建立vm對象 var vm = new Vue({ el: "#app", data: { name:"大標題", age:16, }, }) } </script> </head> <body> <div id="app"> <!-- 在雙標籤中顯示數據要經過{{ }}來完成 --> <h1>{{name}}</h1> <p>{{age}}</p> <!-- 在表單輸入框中顯示數據要使用v-model來完成，模板語法的時候，咱們會詳細學習 --> <input type="text" v-model="name"> </div> </body> </html>
在瀏覽器中能夠在 console.log經過 vm對象能夠直接訪問el和data屬性,甚至能夠訪問data裏面的數據
console.log(vm.$el) # #box vm對象能夠控制的範圍
console.log(vm.$data); # vm對象要顯示到頁面中的數據
console.log(vm.message);# 這個 message就是data裏面聲明的數據,也能夠使用 vm.變量名顯示其餘數據,message只是舉例.
總結：
1. 若是要輸出data裏面的數據做爲普通標籤的內容，須要使用{{ }}
用法：
vue對象的data屬性：
data:{
name:"小明",
}
標籤元素：
<h1>{{ name }}</h1>
2. 若是要輸出data裏面的數據做爲表單元素的值，須要使用vue.js提供的元素屬性v-model
用法：
vue對象的data屬性：
data:{
name:"小明",
}
表單元素：
<input v-model="name">
使用v-model把data裏面的數據顯示到表單元素之後，一旦用戶修改表單元素的值，則data裏面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。
1.4 顯示數據
-
在雙標籤中顯示數據要經過{{ }}來完成數據顯示
-
在表單輸入框中顯示數據要使用v-model來完成數據顯示
-
雙花括號僅用輸出文本內容,若是要輸出html代碼,則不能使用這個.要使用v-html來輸出.v-html必須在html標籤裏面做爲屬性寫出來.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="index"> {{num.split("").reverse().join("").toUpperCase()}}<br> <input type="text" v-model="num"><br> {{img}}<br> <span v-html="img"></span><br> <input type="text" v-model="num2"><br> <p>num1和num2中比較大的數是：{{ num1>num2? num1:num2 }}</p> </div> <script> let vm = new Vue({ el:"#index", data:{ num:"hello", img:"<img src='https://www.luffycity.com/static/img/head-logo.a7cedf3.svg'>", num1:20, num2:0, } }) </script> </body> </html>
總結：
1. 能夠在普通標籤中使用{{ }} 或者 v-html 來輸出data裏面的數據
<h1>{{message}}</h1>
2. 能夠在表單標籤中使用v-model屬性來輸出data裏面的數據，同時還能夠修改data裏面的數據
<input type="text" v-model="username">
在輸出內容到普通標籤的使用{{ }}還支持js代碼。
<h1>{{str1.split("").reverse().join("")}}</h1>
<!-- 3.2 支持js的運算符-->
<h1>{{num1+3}}</h1>
<!-- 3.3 js還有一種運算符,三元運算符,相似於python裏面的三元表達式
三元運算符的語法:
判斷條件 ? 條件爲true : 條件爲false的結果
python 三元表達式[三目運算符]的語法:
a if 條件 else b
-->
<h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>
2. 經常使用指令
指令 (Directives) 是帶有「v-」前綴的特殊屬性。每個指令在vue中都有固定的做用。
在vue中，提供了不少指令，經常使用的有：v-if、v-model、v-for等等。
指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。
由於vue的歷史版本緣由，因此有一部分指令都有兩種寫法：
vue1.x寫法 vue2.x的寫法
v-html ----> {{ }} # vue2.x 也支持v-html
v-bind:屬性名 ----> :屬性
v-on:事件名 ----> @事件名
2.1 操做屬性
格式：
<標籤名 :標籤屬性="data屬性"></標籤名>
<p :title="str1">{{ str1 }}</p> <!-- 也能夠使用v-html顯示雙標籤的內容，{{ }} 是簡寫 -->
<a :href="url2">淘寶</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的寫法 -->
顯示wifi密碼效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="index"> <img :src="url" :alt="title"><br> <input :type="type" placeholder="請輸入wifi密碼"> <button @click="type='text'">顯示密碼</button> </div> <script> let vm = new Vue({ el:"#index", data:{ url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg", title:"路飛學成", type:"password" } }) </script> </body> </html>
2.2 事件綁定
有兩種事件操做的寫法，@事件名 和 v-on:事件名
<button v-on:click="num++">按鈕</button> <!-- v-on 是vue1.x版本的寫法 -->
<button @click="num+=5">按鈕2</button>
總結：
1. 使用@事件名來進行事件的綁定
語法：
<h1 @click="num++">{{num}}</h1>
2. 綁定的事件的事件名，所有都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="index"> <img :src="url" :alt="title"><br> <input :type="type" placeholder="請輸入wifi密碼"> <button @click="clickhander">{{type_tips}}</button> <button v-on:click="clickhander">{{type_tips}}</button> </div> <script> let vm = new Vue({ el:"#index", // 在data能夠定義當前vue對象調用的屬性,調用格式: this.變量名,例如： this.title data:{ url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg", title:"路飛學成", type:"password", type_tips: "顯示密碼", }, methods:{ // 在methods中能夠定義當前vue對象調用的方法,調用格式：this.方法名(),例如： this.clickhander() clickhander(){ // alert(this.type); // 調用上面的data裏面的數據 if(this.type=="password"){ this.type="text"; this.type_tips="隱藏密碼"; }else{ this.type="password"; this.type_tips="顯示密碼"; } } } }) </script> </body> </html>
例如:完成商城的商品增長減小數量
步驟：
-
給vue對象添加操做數據的方法
-
在標籤中使用指令調用操做數據的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <button @click="++num">+</button> <input type="text" v-model="num"> <button @click="sub">-</button> </div> <script> let vm = new Vue({ el:"#box", data:{ num:0, }, methods:{ sub(){ if(this.num<=1){ this.num=0; }else{ this.num--; } }, } }) </script> </body> </html> <!--#box>(button+input+button) tab鍵-->
2.3 操做樣式
2.3.1 控制標籤class類名
格式：
<h1 :class="值">元素</h1> 值能夠是對象、對象名、數組
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .box1{ color: red; border: 1px solid #000; } .box2{ background-color: orange; font-size: 32px; } </style> </head> <body> <div id="box"> <!--- 添加class類名，值是一個對象 { class類1:布爾值變量1, class類2:布爾值變量2, } --> <p :class="{box1:myclass1}">一個段落</p> <p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一個段落</p> </div> <script> let vm1=new Vue({ el:"#box", data:{ myclass1:false, // 布爾值變量若是是false，則不會添加對象的屬性名做爲樣式 myclass2:true, // 布爾值變量若是是true，則不會添加對象的屬性名做爲樣式 myclass3:false, }, }) </script> <!-- 上面的代碼能夠:class的值保存到data裏面的一個變量，而後使用該變量做爲:class的值 --> <style> .box4{ background-color: red; } .box5{ color: green; } </style> <div id="app"> <button @click="mycls.box4=!mycls.box4">改變背景</button> <button @click="mycls.box5=!mycls.box5">改變字體顏色</button> <p :class="mycls">第二個段落</p> </div> <script> let vm2 = new Vue({ el:"#app", data:{ mycls:{ box4:false, box5:true }, } }) </script> <!-- 批量給元素增長多個class樣式類 --> <style> .box6{ background-color: red; } .box7{ color: green; } .box8{ border: 1px solid yellow; } </style> <div id="app2"> <p :class="[mycls1,mycls2]">第三個段落</p> </div> <script> let vm3 = new Vue({ el:"#app2", data:{ mycls1:{ box6:true, box7:true, }, mycls2:{ box8:true, } } }) </script> </body> </html>
總結：
1. 給元素綁定class類名，最經常使用的就是第二種。
vue對象的data數據：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}
html元素：
<div class="box" :class="myObj">2222</div>
最終瀏覽器效果：
<div class="box complete">2222</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .red{ color: red; border: 1px solid blue; } .bg{ background: yellow; } .fz{ font-size: 32px; } .bg1{ background: red; } .bg2{ background: orange; } </style> </head> <body> <div id="box"> <!-- :class={css樣式類名: 變量} --> <p :class="{red:red_bool,bg:bg_bool}">一段文本</p> <button @click="red_bool=false;">去掉樣式</button> <button @click="red_bool=true;">添加樣式</button> <br> <br> <br> <p :class="p_cls">一段文本</p> <button @click="p_cls.red=false;p_cls.bg=false;">去掉樣式</button> <button @click="p_cls.red=true;p_cls.bg=true;">添加樣式</button> <br> <br> <br> <p :class="[arr1,arr2]">一段文本</p> <button @click="arr1.fz=false;">字體變小</button> <button @click="arr1.fz=true;">字體變大</button> <br> <br> <br> <p :class="status?'bg1':'bg2'">一段文本</p> </div> <script> let vm = new Vue({ el:"#box", data:{ red_bool:false, bg_bool:true, p_cls:{ red:true, bg:true }, arr1:{ red:true, fz:true, }, arr2:{ bg:true, }, status:true, } }) </script> </body> </html>
2.3.2 控制標籤style樣式
格式1：值是json對象，對象寫在元素的:style屬性中
標籤元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data數據以下：
data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是對象變量名，對象在data中進行聲明
標籤元素：
<div v-bind:style="styleObject"></div>
data數據以下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是數組
標籤元素：
<div v-bind:style="[style1, style2]"></div>
data數據以下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <p :style="{backgroundColor:bg,color:cg}">一段文本</p> <button @click="cg='white'">改變字體</button> <br> <br> <br> <br> <p :style="p_style">一段文本</p> <button @click="p_style.color='white'">改變字體</button> </div> <script> let vm = new Vue({ el:"#box", data:{ bg:"red", cg:"blue", p_style:{ backgroundColor:"orange", color:"black", } } }) </script> </body> </html>
2.3.3 實例-vue版本選項卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 設置行和當前元素的高度相等,就可讓文本內容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style> <script src="js/vue.js"></script> </head> <body> <div id="card"> <div class="title"> <span @click="num=0" :class="num==0?'current':''">國內新聞</span> <span @click="num=1" :class="num==1?'current':''">國際新聞</span> <span @click="num=2" :class="num==2?'current':''">銀河新聞</span> <!--<span>{{num}}</span>--> </div> <div class="content"> <div class="list" :class="num==0?'active':''">國內新聞列表</div> <div class="list" :class="num==1?'active':''">國際新聞列表</div> <div class="list" :class="num==2?'active':''">銀河新聞列表</div> </div> </div> <script> // 思路： // 當用戶點擊標題欄的按鈕[span]時，顯示對應索引下標的內容塊[.list] // 代碼實現： var card = new Vue({ el:"#card", data:{ num:0, }, }); </script> </body> </html> 代碼運行效果：
2.4 條件渲染指令
vue中提供了兩個指令能夠用於判斷是否要顯示元素，分別是v-if和v-show。
2.4.1 v-if
標籤元素：
<!-- vue對象最終會把條件的結果變成布爾值 -->
<h1 v-if="ok">Yes</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <div v-if="login_status==false" class="login"> <a href="">登陸</a> <a href="">註冊</a> </div> <div v-if="login_status==true" class="user-info"> <span>歡迎回到路飛學成～</span> <a href="">我的中心</a> <a href="">退出登陸</a> </div> </div> <script> let vm = new Vue({ el:"#box", data:{ login_status:false, // 假設有個登陸狀態 } }) </script> </body> </html>
2.4.2 v-else
v-else指令來表示 v-if 的「else 塊」，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。
標籤元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <div v-if="login_status" class="user-info"> <span>歡迎回到路飛學成～</span> <a href="">我的中心</a> <a href="">退出登陸</a> </div> <div v-else class="login"> <a href="">登陸</a> <a href="">註冊</a> </div> </div> <script> let vm = new Vue({ el:"#box", data:{ login_status:false, // 假設有個登陸狀態 } }) </script> </body> </html>
2.4.3 v-else-if
能夠出現多個v-else-if語句，可是v-else-if以前必須有一個v-if開頭。後面能夠跟着v-else，也能夠沒有。
標籤元素：
<h1 v-if="num==1">num的值爲1</h1>
<h1 v-else-if="num==2">num的值爲2</h1>
<h1 v-else>num的值是{{num}}</h1>
data數據：
data:{
num:2
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <span v-if="sex==0">男</span> <span v-else-if="sex==1">女</span> <span v-else>保密</span> </div> <script> let vm = new Vue({ el:"#box", data:{ sex:0, // 假設有個變量表示性別 } }) </script> </body> </html>
2.4.4 v-show
用法和v-if大體同樣，區別在於2點：
-
v-show後面不能v-else或者v-else-if
-
v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文檔中移除元素[ DOM操做中的remove ]
標籤元素：
<h1 v-show="ok">Hello!</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <div v-show="login_status" class="user-info"> <span>歡迎回到路飛學成～</span> <a href="">我的中心</a> <a href="">退出登陸</a> </div> <div v-show="!login_status" class="login"> <a href="">登陸</a> <a href="">註冊</a> </div> </div> <script> let vm = new Vue({ el:"#box", data:{ login_status:true, // 假設有個變量表示登陸狀態 } }) </script> </body> </html>
2.5 列表渲染指令
在vue中，能夠經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象。
數據是數組： <ul> <!--i是列表的每個元素--> <li v-for="book in book_list">{{book.title}}</li> </ul> <ul> <!--i是列表的每個元素，j是每一個元素的下標--> <li v-for="(book, index) in book_list">第{{ index+1}}本圖書：{{book.title}}</li> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book_list:[ {"id":1,"title":"圖書名稱1","price":200}, {"id":2,"title":"圖書名稱2","price":200}, {"id":3,"title":"圖書名稱3","price":200}, {"id":4,"title":"圖書名稱4","price":200}, ] } }) </script> 數據是對象： <ul> <!--i是每個value值--> <li v-for="value in book">{{value}}</li> </ul> <ul> <!--i是每個value值,j是每個鍵名--> <li v-for="attr, value in book">{{attr}}:{{value}}</li> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book: { // "attr":"value" "id":11, "title":"圖書名稱1", "price":200 }, }, }) </script>
練習：
goods:[
{"name":"python入門","price":150},
{"name":"python進階","price":100},
{"name":"python高級","price":75},
{"name":"python研究","price":60},
{"name":"python放棄","price":110},
]
# 把上面的數據採用table表格輸出到頁面，價格大於60的那一條數據須要添加背景色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .bg{ background: yellow; } </style> </head> <body> <div id="box"> <table border="1" align="center" width="799"> <tr> <th>name</th> <th>price</th> </tr> <tr v-for="book,index in goods" v-if="book.price > 60" class="bg" > <td>{{book.name}}</td> <td>{{book.price}}</td> </tr> <tr v-else > <td>{{book.name}}</td> <td>{{book.price}}</td> </tr> </table> </div> <script> let vm=new Vue({ el:"#box", data:{ goods:[ {"name":"python入門","price":150}, {"name":"python進階","price":100}, {"name":"python高級","price":75}, {"name":"python研究","price":60}, {"name":"python放棄","price":110}, ] } }) </script> <!--# 把上面的數據採用table表格輸出到頁面，價格大於60的那一條數據須要添加背景色--> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 設置行和當前元素的高度相等,就可讓文本內容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style> <script src="js/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="book in book_list">{{book.title}}</li> </ul> <table border="1" align="center" width="799"> <tr> <th>序號</th> <th>ID</th> <th>圖書名</th> <th>價格</th> </tr> <tr v-for="book,index in book_list"> <td>下標：{{index+1}}</td> <td>{{book.id}}</td> <td>{{book.title}}</td> <td>{{book.price}}</td> </tr> </table> </div> <script> var vm1 = new Vue({ el:"#app", data:{ book_list:[ {"id":11,"title":"圖書名稱1","price":20}, {"id":12,"title":"圖書名稱2","price":2000.3}, {"id":13,"title":"圖書名稱3","price":200.50}, {"id":14,"title":"圖書名稱4","price":200}, ] } }) </script> <ul id="test"> <!--i是每個value值,j是每個鍵名--> <li v-for="value, attr in book">{{attr}}:{{value}}</li> </ul> <script> var vm3 = new Vue({ el:"#test", data:{ book: { // "attr屬性名":"value屬性值" "id":11, "title":"圖書名稱1", "price":200 }, }, }) </script> </body> </html>
相關文章
- 1. vue01
- 2. vue01-上
- 3. docker技術快速實現前後端項目的集羣化11搭建renren-fast-vue前端基於nginx的負載均衡集羣...
- 4. 使用IDEA創建Vue項目
- 5. windows下安裝VUE
- 6. npm的安裝
- 7. VUE腳手架大搭建，適用於vuecli2.0--4.0
- 8. vue02
- 9. 安裝vue教程
- 10. Vue 環境搭建（win10）
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue01
- 2. vue01-上
- 3. docker技術快速實現前後端項目的集羣化11搭建renren-fast-vue前端基於nginx的負載均衡集羣...
- 4. 使用IDEA創建Vue項目
- 5. windows下安裝VUE
- 6. npm的安裝
- 7. VUE腳手架大搭建，適用於vuecli2.0--4.0
- 8. vue02
- 9. 安裝vue教程
- 10. Vue 環境搭建（win10）