vue.js前后端数据交互之提交数据操作详解
时间：2018/5/9 21:49:15阅读：
本文实例讲述了vue.js前后端数据交互之提交数据操作。分享给大家供大家参考，具体如下：前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用ajax就能实现，但他的原始语法有点。。。额 。。。复杂，所以这里给大家提…
本文实例讲述了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>