在前端開發中，提交JSON數據已經變成了一種常見的任務。Vue.js 中提供了一些內置的函數來簡化這個過程。在這篇文章中，我們將介紹 Vue.js 中如何提交 JSON 數據。

首先，我們需要了解 Vue.js 中如何處理表單提交。Vue.js 提供了一個名為 v-model 的指令，可以雙向綁定表單元素和數據。當表單元素的值發生改變時，對應綁定的數據會更新，反之亦然。我們可以通過在表單元素上使用 v-model 來建立綁定：

<input v-model="message" />

在上面的例子中，我們使用 v-model 綁定一個輸入框的值到 Vue 實例的 message 變量。當輸入框的值改變時，message 變量也會隨之改變。

在提交 JSON 數據時，我們需要將 v-model 綁定的數據格式化成 JSON 字符串。Vue.js 提供了一個名為 JSON.stringify 的函數來完成這個任務。我們可以在提交表單時調用這個函數，并將格式化后的 JSON 字符串通過 AJAX 發送到服務器。

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
onSubmit: function() {
var data = JSON.stringify({ message: this.message });
// TODO: 發送數據到服務器
}
}
});
</script>

在上面的例子中，我們定義了一個 onSubmit 方法來處理表單提交事件。在 onSubmit 方法中，我們使用 JSON.stringify 函數將數據格式化成 JSON 字符串，并將其保存到 data 變量中。在發送數據到服務器時，我們可以將 data 變量作為請求體發送。

要使用 AJAX 發送請求，我們可以使用 Vue.js 中的 $http 模塊。$http 模塊提供了多種接口來發送請求，包括 GET、POST、PUT、DELETE 等。我們可以通過在 onSubmit 方法中調用 post 方法來發送 POST 請求：

methods: {
onSubmit: function() {
var data = JSON.stringify({ message: this.message });
this.$http.post('/api/messages', data)
.then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
}
}

在上面的例子中，我們使用 post 方法發送 POST 請求到 /api/messages 接口。post 方法接收兩個參數：URL 和請求體。當請求成功時，then 方法會被調用并傳入響應對象；當請求失敗時，then 方法的第二個回調函數會被調用并傳入錯誤對象。

除了使用 $http 模塊外，Vue.js 還提供了一個名為 Axios 的第三方庫來處理 AJAX 請求。Axios 提供了和 $http 模塊類似的接口，并且在 Vue.js 社區中更加流行。如果你需要更多的配置選項和功能，可以考慮使用 Axios 來發送請求。

最后，需要注意的是，在提交 JSON 數據時，后端服務器需要能夠解析 JSON 格式的請求體。如果你使用的是 Express.js 或者其他流行的后端框架，可以通過引入 Body-Parser 等中間件來處理 JSON 請求體。

總之，在 Vue.js 中提交 JSON 數據非常簡單。使用 v-model 綁定表單元素和數據，使用 JSON.stringify 函數將數據格式化成 JSON 字符串，使用 $http 或 Axios 發送 AJAX 請求即可。