今天學習了Vue的相關知識，有一個明顯的感受：之前寫一個html頁面，每次更新數據后就得重新登錄頁面，進行刷新。而Vue中可以將用戶輸入的數據直接傳到后台的代碼中直接使用。
1.學習前准備工作：下載相應的包
2.idea進行配置：下載Vue插件
3.代碼：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns: xmlns: xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-text="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--顯示--> <!-- v-model 可以進行前后數據的同步。 --> <h2>采用： v-model</h2> <div id="app"> <p> 單價：<input type="text" v-model:value="price"> </p> <p> 數量：<input type="text" v-model:value="count"> </p> <p> 總計：<input type="text" v-model:value="total"> <button v-on:click="cal()">計算</button> </p> <hr> <p> <h2>一個簡易計算器！</h2> 操作數1：<input type="text" v-model:value="op1"> <select v-model:value="opr"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> 操作數2：<input type="text" v-model:value="op2"> = 結果：<input type="text" :value="res"> <button @click="cal2()">計算</button> </p> <!-- v-bind可以寫為 ： --> <!-- v-on可以寫為 @ --> </div> <!--引入包資源--> <script src="../lib/vue.js"></script> <script> //聲明一個Vue對象 var vm=new Vue({ el:"#app", //綁定前端進行顯示的ID data:{ //數據 price:"12", count:"1", total:"0", op1:"1", opr:"+", op2:"1", res:"0" }, methods:{ //方法 cal(){ this.total=this.price*this.count; }, cal22(){ var flag=this.opr; switch (flag) { case '+': this.res=parseInt("this.op1")+parseInt("this.op1"); break; case '-': this.res=parseInt("this.op1")-parseInt("this.op1"); break; case '*': this.res=parseInt("this.op1")*parseInt("this.op1"); break; case '/': this.res=parseInt("this.op1")/parseInt("this.op1"); break; } }, cal2(){ this.res=eval("parseInt(this.op1)"+this.opr+"parseInt(this.op2)"); } } }) </script> </body> </html>
4.效果圖：
總結：在頁面中可以直接的進行輸入數字，並可以動態的顯示結果。（不用進行刷新）
最好的學習路徑： 官網~~~
eg：Vue自學官網：https://cn.vuejs.org/v2/guide/