隨著互聯網的發展，各種前端開發工具層出不窮。Vue.js是一種漸進式JavaScript框架，可以將一個web應用程序UI分離成基本的組件，從而使這個過程變得更加靈活和高效。本文將介紹如何使用Vue.js實現一個點擊提交的事件.

首先，我們需要在index.html文件中引入Vue.js庫。我們可以使用CDN方式將Vue.js庫鏈接到我們的項目中。代碼如下：

<script src="https://unpkg.com/vue"></script>

接下來，在index.html文件中創建一個表單。該表單應該包含輸入框和一個提交按鈕。代碼如下：

<div id="app">
<form>
<input type="text" v-model="message" />
<button type="submit">提交</button>
</form>
</div>

在Vue.js中，我們使用v-model指令來實現數據的雙向綁定。在上述代碼中我們將輸入框的值與Vue實例中的message屬性進行綁定。當用戶在輸入框中輸入內容時，message的值也會跟著改變。

接下來，在Vue.js的實例中創建一個方法來處理按鈕的點擊事件。代碼如下：

new Vue({
el: '#app',
data: {
message: ''
},
methods: {
onSubmit: function () {
alert('您輸入的內容是： ' + this.message)
}
}
})

在上述代碼中，我們使用了methods屬性來定義一個方法onSubmit，這個方法會在用戶點擊提交按鈕時被調用。在這個方法中，我們使用alert函數來顯示用戶輸入的內容。

為了在用戶點擊提交按鈕時調用onSubmit方法，我們需要給表單的submit事件綁定一個處理函數。代碼如下：

<form v-on:submit.prevent="onSubmit">

在上述代碼中，我們使用了v-on指令來給submit事件綁定處理函數。prevent修飾符可以防止瀏覽器默認提交表單的行為。

最后，我們需要在頁面中渲染Vue實例。代碼如下：

<script>
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
onSubmit: function () {
alert('您輸入的內容是： ' + this.message)
}
}
})
</script>

現在當用戶在輸入框中輸入內容并點擊提交按鈕時，會出現一個彈窗來顯示用戶輸入的內容。我們通過Vue.js實現了一個點擊提交事件。