利用vue的一个插件resource,发Ajax请求

前端代码

 <ul class="sign">
                  <li><input type="text" placeholder="手机号"  v-model="loginUser.phone"></li>
                  <li><input type="password" placeholder="密码" v-model="loginUser.password"></li>
                  <li class="sign-check"><input type="text" id="checkText" v-model="loginUser.code" class="checkText" placeholder="验证码"><span class="checkCode" style="background: none;"><img :src="picCode" alt="" style=" 100%;height: 100%;"></span><span class="notsee" @click="updatePicCode">看不清楚,换一张</span></li>
                  <li><span class="submit" @click='userLogin'>登录</span></li>
                  <li><span class="forgetPwd color" @click="loginIndex='1'">忘记密码</span><span class="color dialogin" @click="loginIndex='2'">点击注册</span></li>     
                  <li><em></em><span class="otherSign">使用第三方账号登录</span><em></em></li>
                  <li><img src="../img/weixin.png"><img src="../img/QQ.png"></li>
                </ul>

js代码

new Vue({
    el:'#app',
    data:{
        navData:[],
        banImgData:[],
        mainData:[],
        navIdArr:[],
        navNameArr:[],
        bannerData:[],
        labelArr:[],//标签数组 【 ID=》 name】
        timer:"",
        index:"",
        navid:'',
        navtype:'',
        cityId:'0',
        labelFArr:[],
        laeblSArr:[],
        laeblTArr:[],
        isShowAllSortIndex:0,
        loginIndex:'-1',
        picCode:'',
        loginUser:{
            phone:'',
            password:'',
            code:''
        },


mounted:function() {

this.$nextTick(function(){
this.renderView();
if(this.bannerData.length>0){
this.active();
}
})
},
methods:{
/**
* 用户登录
*/
userLogin:function(){


var body=this.loginUser;
this.$http.post(ajaxAddress.preFix+ajaxAddress.user.login,{},{params:body})
.then(function(res){
console.log(res);
})
},

 

v-model="a.b"  在JS中声明类A,类A的B属性,@click="方法名",触发登录函数,==同于onclick

原文地址:https://www.cnblogs.com/hanshuai0921/p/6699694.html