本文實例講述了vue.js前后端數據交互之提交數據操作。分享給大家供大家參考，具體如下：

前端小白剛開始做頁面的時候，我們的前端頁面中經常會用到表單，所以學會提交表單也是一個基本技能，其實用ajax就能實現，但他的原始語法有點。。。額 。。。復雜，所以這里給大家提供一種用vue-resource向后端提交數據。

（1）第一步，先在template中寫一個表單；

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item label="用戶名" prop="name">   <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="用戶類型" prop="type">   <el-select v-model="ruleForm.type" placeholder="請選擇專利類型" style="width:500px;"> <el-option label="一級管理員" value="1"></el-option> <el-option label="二級管理員" value="2"></el-option> <el-option label="三級管理員" value="3"></el-option> <el-option label="普通用戶" value="4"></el-option>   </el-select> </el-form-item> <el-form-item label="出生日期" prop="date">   <el-input v-model="ruleForm.date"></el-input> </el-form-item> <el-form-item label="備注" prop="intro">   <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input> </el-form-item> <el-form-item>   <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form-item></el-form>

（2）在data里面定義表單內容的字段及表單的約束規則；

data() {   return {    ruleForm: {       name: '',       type: '',       date: '',       intro: '',     }   } rules: {     name: [      { required: true, message: '請輸入用戶名', trigger: 'blur' },      { min: 1, max: 20, message: '長度在 1 到20個字符', trigger: 'blur' }     ],     type: [      { required: true, message: '請選擇用戶類型', trigger: 'change' }     ],     date: [      { required: true, message: '請輸入出生日期', trigger: 'blur' },      { min: 1, max: 100, message: '長度在 1 到 100 個字符', trigger: 'blur' }     ],     intro: [      { required: true, message: '請輸入備注', trigger: 'blur' },      { min: 50, max: 500, message: '請輸入至少50個字', trigger: 'blur' }     ],    }}

（3）定義提交表單的方法

methods:{submitForm(formName) {      this.$refs[formName].validate((valid) => {        if (valid) {      this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){            if(res.body==1){              this.$alert("提交成功", '提交結果', {                confirmButtonText: '確定',                type: 'success',                callback: action => {                },              });            }            else{              this.$alert("提交失敗", '提交結果', {                confirmButtonText: '確定',                type: 'warning',                callback: action => {                },              });            }          })        } else {          console.log('error submit!!');          return false;        }      });    }}