前端向后端提交表單數(shù)據(jù)是實(shí)際開發(fā)中常見的操作。在Vue中，我們可以利用Axios庫向后端發(fā)送請求，其中包含表單數(shù)據(jù)。
首先，在Vue中引入Axios庫。可以使用CDN或者NPM的方式引入，具體引入方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue form submit example</title>
</head>
<body>
<div id="app">
<form @submit.prevent="submitForm">
<label for="name">Name:</label>
<input type="text" id="name" v-model="form.name"><br>
<label for="email">Email:</label>
<input type="email" id="email" v-model="form.email"><br>
<button type="submit">Submit</button>
</form>
</div>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
form: {
name: '',
email: ''
}
},
methods: {
submitForm: function(){
axios.post('/submit-form', this.form).then(function(response){
console.log(response.data); // 在控制臺輸出返回的數(shù)據(jù)
});
}
}
});
</script>
</body>
</html>可以看到，使用Axios發(fā)送POST請求非常簡單。其中，參數(shù)'/submit-form'為接口地址，form數(shù)據(jù)為Vue中的data對象，response為返回的數(shù)據(jù)。當(dāng)然，需要后端提供對應(yīng)的接口代碼。
如果需要發(fā)送GET請求，Axios也提供了相應(yīng)的方法。例如：
axios.get('/user?ID=12345').then(function(response){
console.log(response.data);
}).catch(function(error){
console.log(error);
});在實(shí)際開發(fā)中，表單數(shù)據(jù)通常需要進(jìn)行驗(yàn)證，以避免無效數(shù)據(jù)被提交。Vue中提供了v-validate指令來方便表單驗(yàn)證。
<form v-validate @submit.prevent="submitForm">
<label for="name">Name:</label>
<input type="text" id="name" v-model="form.name" name="name" v-validate="'required|min:2|max:25'"><br>
<span v-show="errors.has('name')">{{ errors.first('name') }}</span>
<label for="email">Email:</label>
<input type="email" id="email" v-model="form.email" name="email" v-validate="'required|email'"><br>
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
<button type="submit">Submit</button>
</form>如上代碼所示，我們引入了vue-validator庫，并綁定了v-validate指令。在表單提交前，需要檢查表單數(shù)據(jù)是否通過驗(yàn)證，在submitForm方法中添加以下代碼：
if(this.errors.items.length > 0){
// 表單數(shù)據(jù)不合法
console.log(this.errors.items);
return false;
}通過以上方法，我們可以非常方便地實(shí)現(xiàn)前端表單提交功能，并能滿足常規(guī)的表單數(shù)據(jù)驗(yàn)證需求。