今天学习了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/