本次目标
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>