一、Vue是什么?
Vue（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。采用自底向上增量開發的設計。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue漸進式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只關注視圖層。
Vue通過新的屬性（自定義）和{{表達式}}擴展了 HTML。
Vue的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue學習起來非常簡單。
二、Vue特性
l 輕量
Vue.js庫的體積非常小的，並且不依賴其他基礎庫。
l 數據綁定
對於一些富交互、狀態機類似的前端UI界面，數據綁定非常簡單、方便。
l 指令
內置指令統一為(v-*)，也可以自定義指令，通過對應表達值的變化就可以修改對應的DOM。
l 插件化
Vue.js核心不包含Router、AJAX、表單驗證等功能，但是可以非常方便地根據需要加載對應插件。
l 組件化
組件可以擴展 HTML 元素，封裝可重用的代碼。允許我們使用小型、自包含和通常可復用的組件構建大型應用
l 兼容性
Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
三、Vued的使用：
它有兩個版本：開發版本和生產版本（由於代碼太多，具體的vue.js文件需要到vue官網復制）。
<!-- 引入vue開發版文件 -->
<script type="text/javascript" src="js/vue/vue.js"></script>
四、Vue實例講解
1、vue實例掛在（el）的標簽
每個Vue實例通過el配置掛載的標簽，該標簽可以通過id或者是class掛載。 實例上的屬性和方法只能夠在當前實例掛載的標簽中使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> 姓名：{{user.name}}；年齡：{{user.age}}；性別：{{user.sex}} </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ messge:"變形金剛", user:{ name:"張三", age:18, sex:"男" } } }); // 通過Vue實例可以直接修改data對象中的數據 app.messge="修改后的變形金剛"; app.user.name="王小二"; </script> </body> </html>
2、Vue中的數據(data)
1 、Vue實例的數據保存在配置屬性data中, data自身也是一個對象.
2、通過Vue實例直接訪問和修改data對象中的數據,及時同步的頁面上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> </div> <div class="cla"> <h3> {{messge}}</h3> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ messge:"變形金剛" } }); var ha= new Vue({ el:".cla", data:{ messge:"搬磚的程序員" } }); </script> </body> </html>
3、Vue中的方法(methods)
1、Vue實例的方法保存在配置屬性methods中,methods自身也是一個對象. 該對象中值都是方法體
2、方法都是被Vue對象調用,所以方法中的this代表Vue對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> {{haa()}} </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ messge:"變形金剛", user:{ name:"張三", age:18, explain:"過來啊！" } }, methods:{ //方法寫法一： haa:function(){ return this.user.name+this.user.explain+"我請你吃糖果"; }, //方法寫法二： yaa(){ //跳出一個彈窗 alert(this.messge+"是鋼鐵直男"); } } }); app.yaa(); </script> </body> </html>
4、vue數據雙向綁定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--監聽input中值的改變同步到data中的message上: v-model:數據的綁定； 將app對象中的message值綁定到input中，同時輸入input值后，也作用於app的message值。 --> <h3> {{messge}}</h3> <input type="text" v-model="messge" /> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ messge:"變形金剛", } }); </script> </body> </html>
五、Vue架構的認識：
Vue是一款開源的JavaScript MV*（MVVM、MVC）框架。
Vue引入了MVVM (Model-View-ViewModel)模式，他不同於MVC架構.
MVC模式：
Model： 數據模型，一些JavaScript 對象，比如 {name : "小小強",age : 16};
View: 視圖，網頁中的內容，一般由HTML模板生成。
Controller : 控制器（路由），視圖和模型之間的膠水。
MV VM模式：
Model：它是與應用程序的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操作，所以模型也不會包含任何界面顯示相關的邏輯。在web頁面中，大部分Model都是來自Ajax的服務端返回數據或者是全局的配置對象。
View：它專注於界面的顯示和渲染，在Vue中則是包含一堆聲明式Directive和Component的視圖模板。
ViewModel：它是View和Model的粘合體，負責View和Model的交互和協作，它負責給View提供顯示的數據，以及提供了View中Command事件操作Model的途徑；在vue中“Vue對象實例”充當了這個ViewModel的角色；
View不能直接與Model交互，而是通過Vue實例這個ViewModel來實現與Model的交互。對於界面表單的交互，通過v-model指令來實現View和ViewModel的同步。對於View而言，ViewModel中的DOM Listeners工具會幫助我們監聽頁面上DOM元素的變化，一旦發生變化，Model中的數據也會發生改變；
對於Model而言，當我們添加或修改Model中的數據時，ViewModel中的Data Bindings工具會幫助我們更改View中的DOM元素。從而實現View和Model的分離，達到對前端邏輯MVVM的分層架構。
六、VueJS表達式
語法：
VueJS表達式寫在雙大括號內：{{ expression }}。
VueJS表達式把數據綁定到 HTML。
VueJS將在表達式書寫的位置"輸出"數據。
VueJS表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
案例：
1、簡單表達式
在{{ }}中可以進行簡單的運算
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--簡單表達式 --> <h1>{{5+5}}</h1> <!-- +:運算，字符串連接 --> <h1>{{5+"v5"}}</h1> <h1>{{5+"5"}}</h1> <!-- -：減法 --> <h1>{{"5"-"5"}}</h1> <h1>{{5*5}}</h1> <!-- *:乘 法 --> <h1>{{"5"*"5"}}</h1> <!-- / 除法--> <h1>{{5/5}}</h1> <h1>{{5/5}}</h1> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app" }); </script> </body> </html>
2、三目表達式
在{{}}中的表達式可以使用三元運算符,但是不能夠使用其他語句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--三目運算 --> {{ show?"真":"假"}} </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ show:true, } }); </script> </body> </html>
3、字符串表達式
1、直接使用字符串字面值作為字符串對象
2、使用data中的字符串對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> {{"這是字面值"}}<br/> {{"這是字面值".length}}<br/> {{message.length}}<br/> <!--從字符串索引1開始獲取，到索引5之前結束--> {{message.substring(1,5)}}<br/> <!--從字符串索引2開始獲取，到索引6之前結束；toUpperCase():將小寫變為大寫--> {{message.substring(2,6).toUpperCase()}}<br/> <!--substr(index,length):從index開始截取，截取length個字符串 --> {{message.substr (1,3)}}<br/> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"我在data里面" } }); </script> </body> </html>
4、對象表達式
在表達式中可以使用data中定義的對象的各種用法.像使用js對象中的方法和屬性一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> {{messge}}<br/> {{JSON.stringify(messge)}}<br/> {{messge.toString()}}<br/> {{messge.name}}<br/> {{messge.age}}<br/> {{messge.getAge()}}<br/> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var user ={ name:"張三", age:19, getAge:function(){ return this.age; }, toString:function(){ return "姓名:"+this.name+",年齡:"+this.age; } } var app=new Vue({ el:"#app", data:{ messge:user } }); </script> </body> </html>
5、數組表達式
在表達式中可以使用JavaScript數組中的任何語法來操作數組.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> {{hobbys}}<br/> {{hobbys[0]}}<br/> {{hobbys.length}}<br/> {{hobbys.toString()}}<br/> <!--用“-----”將每個元素分隔開顯示--> {{hobbys.join("------")}}<br/> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ hobbys:["打游戲","踢足球",'看電視',"游泳"] } }); </script> </body> </html>
七、Vue指令
1、什么是指令
指令是一個帶有v-前綴的特殊標簽屬性, 指令屬性的值預期是單個JavaScript表達式.
2、常見的指令
v-text=“表達式” 設置標簽中的文本
v-html=“表達式” 設置標簽中的html
v-if=“表達式” 判斷條件
v-for=“表達式” 循環
v-model=“表達式” 數據雙向綁定
v-on=“表達式” 注冊事件
3、指令的作用
1、作用: 當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
2、一個標簽元素上可以出現多個指令屬性
3、指令只能夠出現在Vue對象所掛載的標簽范圍內的標簽中
4、v-text指令
注意事項:
1、如果值是html的值,也不會作為普通的文本使用.
2、標簽中的屬性值必須是data中的一個屬性.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span v-text="message"></span><br/> <span v-text="user.username"></span><br/> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message: "<h1>這是一個Span!</h1>", user: { username: "李李" }, } }); </script> </body> </html>
5、v-html指令
注意事項: 1、{{表達式}} 可以插入的標簽的內容中 2、v-text和v-html更改標簽中的所有內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!--將message的值解析為html來執行--> <div v-html="message"></div> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message: "<h1>這是一個Html!</h1>", } }); </script> </body> </html>
6、v-for指令
數組：
1、v-for="元素 in 數組"（v-for="ele in arr"）
2、v-for="(元素,索引) in 數組"（v-for="(ele,index) in arr"）
對象：
1、v-for="值in 對象"（v-for="value in obj"）
2、v-for="(值,鍵) in 對象"（v-for="(value,key) in obj"）
3、v-for=(值,鍵,索引) in 對象（v-for=(value,key,index) in obj）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>循環數組</h1> <ul> <li v-for="hobby in hobbys">{{hobby}}</li> </ul> <h1>遍歷對象</h1> <ul> <li v-for="value in student">{{value}}</li> </ul> <h1>帶索引循環數組</h1> <ul> <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li> </ul> <h1>帶鍵遍歷對象</h1> <ul> <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li> </ul> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ hobbys : ["爬山","游泳","打豆豆","睡覺"], student : { name: "小毛", age: 2, sex: "男", }, num : 10, str : "itsource", } }); </script> </body> </html>
7、v-bind指令
1、v-bind:屬性名="表達式"（v-bind:src=”路徑”簡寫：src=”路徑”）
2、v-bind=”對象”
注意：
將一個對象 鍵 和 值 作為標簽的屬性的名字和值時,在v-bind后不需要指定屬性的名字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- v-bind指令 作用：將html的屬性和Vue實例data值綁定到一起 語法1: v-bind:屬性名="表達式" 語法2: :屬性名="表達式" 語法3: v-bind="對象" --> <div id="app"> <iframe v-bind:src="src"></iframe><br /> <iframe :src="src"></iframe><br /> <!--<iframe src="http://www.baidu.com" class="myIframe"></iframe>--> <!--<iframe v-bind="attr"></iframe>--> <iframe :src="attr.src" :class="attr.class"></iframe><br /> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ src:"http://www.baidu.com", attr:{ src:"http://www.baidu.com", class:"myIframe" } } }); </script> </body> </html>
8、v-model指令
1、v-model只作用於以下表單:
input、 select、 textarea
注意：在input標簽中，當v-model和value屬性都存在的時候，在前台頁面上展示的是v-model的值，但value的值卻沒有改變，提交表單時提交的還是value值。
復選框v-mode表達式的值為一個數組。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input v-model="message" value="這是value值" /><br /> 愛好: <input type="checkbox" v-model="hobby" value="1"/>唱 <input type="checkbox" v-model="hobby" value="2"/>跳 <input type="checkbox" v-model="hobby" value="3"/>rap 性別 <input type="radio" v-model="sex" value="1"/>man <input type="radio" v-model="sex" value="2"/>woman </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"dbl", hobby:[1,2], sex:2 } }); </script> </body> </html>
9、v-show指令
<標簽名 v-show="真假表達式"></標簽名>
如果v-show="真",標簽中添加display:none樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- v-show: 語法： v-show="真假表達式" 如果表達式為假,相當於是在這個標簽上添加css樣式:display:none(相當於隱藏了) --> <p v-show="isShow">我是07</p> </div> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ isShow:true } }); </script> </body> </html>
10、v-if指令
<標簽名 v-if="表達式"></標簽名>
<標簽名 v-else-if="表達式"></標簽名>
<標簽名 v-else-if="表達式"></標簽名>
<標簽名 v-else></標簽名>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p v-if="money<10">中午不吃飯</p> <p v-else-if="money>=10&&money<20">吃牛肉面</p> <p v-else>吃拉面</p> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ money:15 } }); </script> </body> </html>
八、事件
v-on:事件名稱="表達式或者vue函數的調用"(例如：v-on:click="方法名()")
簡寫：@事件名稱
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button @click="clickMe(1)">點我試試</button> <button @click="clickMe(2)">點我試試</button> </div> <!--開發版本(項目上線之后要替換成生產版本)；生產版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ money:15 }, methods:{ clickMe(num){ alert(num) } } }); </script> </body> </html>
九、綜合練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue綜合練習</title> <style type="text/css"> td{ align-content: center; } </style> </head> <body> <div id="app"> <h3>購物車</h3> <h4 v-if="products.length==0">空空如也</h4> <div v-else> <table border="1" cellspacing="0" align="center"> <tr> <th>編號</th> <th>商品名稱</th> <th>商品價格</th> <th>商品數量</th> <th>操作</th> </tr> <tr v-for="(product,index) in products"> <td>{{index+1}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> <td><button @click="reduce(index)">-</button>{{product.num}}<button @click="add(index)">+</button></td> <td><button @click="del(index)">刪除</button></td> </tr <tr> <td colspan="5">總價：{{total}}</td> </tr> </table> </div> </div> <script type="text/javascript" src="js/vue.js" ></script> <script> var app = new Vue({ el: "#app", data: { products:[ {id:1,name:"西瓜",price:20.00,num:4}, {id:2,name:"牛奶",price:30.00,num:2}, {id:3,name:"榴蓮",price:80.00,num:1} ], total:0 }, methods:{ //新版本寫法：del(){} //刪除商品 del:function(index){ this.count(); this.products.splice(index,1); }, //商品數量增加 add:function(index){ this.count(); this.products[index].num++; }, //商品數量減少 reduce:function(index){ this.count(); //購物車中一種商品的數量至少為1個 if(this.products[index].num>1) { this.products[index].num--; } }, //計算商品總價格 count:function(){ this.total=0; for(var i in this.products){ this.total+=this.products[i].price*this.products[i].num; } } }, //最后運行 mounted(){ this.count(); } }); </script> </body> </html>