本次目標
1.使用Vue完成表單數據的雙向綁定。
1.1 表單數據的綁定。
1.2 驗證碼圖片地址的動態綁定。
2.使用axios插件完成ajax提交。
使用Vue完成表單數據的雙向綁定
沒有接觸vue之前，在我所瞭解的前端JS庫中，JQuery是我使用最順手的一個。它對傳統Js操作Dom元素的方式進行了進一步地封裝，可以使開發者用更加簡潔的代碼實現同樣的功能。
但是仔細想想，無論操作dom元素方式變的多麼簡單，其本質上都是使用數據更新界面元素或者通過界面元素更新數據，這些都是實現目標的手段。
有沒有一種方式，可以直達目標？自動幫我們實現數據到元素的綁定和展示？Vue就是在這樣的背景下應用而生的，它基於MVVM模型(Model-View-ViewModel)。是一個用戶創建WEB交互界面的庫，創建數據驅動的UI組件。其核心是通過數據驅動界面的更新和展示而非JS通過操作DOM來改變頁面的顯示。
準備工作
下載/引入Vue.js、axios.js到標籤中。
<script type="application/javascript" src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
指明需要被Vue管理的Html代碼塊：id=“vue”
<!-- 登錄主體部分start -->
<div class="login w990 bc mt10 regist" id="vue">
...from表單...
</div>
表單數據和驗證碼圖片地址的綁定
<form action="" method="post">
<ul>
<li>
<label for="">用戶名：</label>
<input type="text" class="txt" v-model="userName"/>
<p>3-20位字符，可由中文、字母、數字和下劃線組成</p>
</li>
<li>
<label for="">密碼：</label>
<input type="password" class="txt" name="psw" v-model="psw"/>
<p>6-20位字符，可使用字母、數字和符號的組合，不建議使用純數字、純字母、純符號</p>
</li>
<li>
<label for="">確認密碼：</label>
<input type="password" class="txt" name="psw2" v-model="psw2"/>
<p> <span>請再次輸入密碼</p>
</li>
<li class="checkcode">
<label for="">驗證碼：</label>
<input type="text" name="valicode" v-model="valicode"/>
<img v-bind:src="valiCodeImg" alt="驗證碼" @click="changeValiCode"/>
<span>看不清？<a href="#" @click="changeValiCode">換一張</a></span>
</li>
<li>
<label for=""> </label>
<input type="checkbox" class="chb" checked="checked" /> 我已閱讀並同意《用戶註冊協議》
</li>
<li>
<label for=""> </label>
<input type="button" value="" class="login_btn" @click="submit" />
</li>
</ul>
</form>
使用axios插件完成ajax提交
1.vue本身不支持發送AJAX請求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件實現。
2.axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護。axios的Github地址：https://github.com/axios/axios
主要代碼實現：
<script type="application/javascript">
var vm = new Vue({
el:"#vue",
data:{
ifGo:true,
userName:"",
psw:"",
psw2:"",
valicode:"",
valiCodeImg:"/user/getValiCodeImg"
},
methods:{
submit:function () {
this.checkValue();
if(this.ifGo){
const url="/user/regist";
let datas = {"userName":this.userName,"psw":this.psw,"psw2":this.psw2,"valicode":this.valicode};
axios.put(url,datas).then(function(resp){
console.log(resp.data);
}).catch(resp => {
alert('請求失敗：'+resp.status+','+resp.statusText);
});
}
},
changeValiCode:function () {
this.valiCodeImg="/user/getValiCodeImg?a="+Math.random();
},
checkValue:function () {
this.ifGo=true;
if(this.userName==""){
alert("用戶名不能爲空");
this.ifGo=false;
}
if(this.psw==""){
alert("密碼不能爲空");
this.ifGo=false;
}
if(this.psw2==""){
alert("確認密碼不能爲空");
this.ifGo=false;
}
if(this.valicode==""){
alert("驗證碼不能爲空");
this.ifGo=false;
}
}
}
})
</script>
效果展示
