在web開發中，表單是不可或缺的一部分。Flask是一款web框架，而Vue是一個JavaScript庫。它們的結合使用可以幫助我們快速地創建一個響應式表單。

首先，在Flask中我們需要創建一個路由來處理表單提交請求。下面是一個示例：

from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/submit-form', methods=['POST'])
def handle_form():
data = request.get_json()
# 處理表單提交的數據
return jsonify(success=True)

接下來，在Vue中我們可以通過綁定數據來控制表單的呈現和交互。下面是一個Vue組件的例子：

<template>
<form v-on:submit.prevent="submitForm">
<label for="name">姓名</label>
<input type="text" name="name" v-model="formData.name">
<label for="email">郵箱</label>
<input type="email" name="email" v-model="formData.email">
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data: function () {
return {
formData: {
name: '',
email: ''
}
}
},
methods: {
submitForm: function () {
fetch('/submit-form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(this.formData)
})
.then(response =>response.json())
.then(data =>{
if (data.success) {
alert('提交成功！')
} else {
alert('提交失敗！')
}
})
}
}
}
</script>

以上代碼中，我們使用了Vue的雙向數據綁定來實現表單數據的綁定。當表單提交時，我們使用fetch函數向Flask服務器發送POST請求，并將表單數據以JSON格式傳遞。在Flask服務器端，我們可以使用request.get_json()來獲取POST請求提交的JSON數據。

通過Flask和Vue的組合，我們可以輕松地創建出一個功能強大的表單應用。在實際開發中，我們可以根據需求添加更多字段、表單驗證等功能。