preventDefault() 方法是 JavaScript 事件處理程序中非常常用的方法，它能夠取消事件的默認行為。在 Vue 中，preventDefault() 方法同樣可以起到非常重要的作用。下面我們來一起深入了解 preventDefault() 在 Vue 中的應用。

使用 preventDefault() 方法可以避免某些用戶行為的默認行為，比如說防止用戶在鏈接被點擊時跳轉到其他頁面，或者避免用戶在表單中按下回車鍵提交表單。在 Vue 中，我們可以通過在方法中調用事件對象的 preventDefault() 方法來實現取消事件的默認行為。

<template>
<div>
<form v-on:submit.prevent="onSubmit">
<input type="text" v-model="name">
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
},
methods: {
onSubmit(event) {
event.preventDefault();
console.log(this.name);
}
}
}
</script>

上述代碼展示了使用 preventDefault() 方法來避免表單提交的默認行為。在 form 元素上添加 v-on:submit.prevent 屬性，表示在表單提交時調用 preventDefault() 方法。在 onSubmit 方法中同樣調用 event.preventDefault() 方法，避免表單提交時頁面刷新。這樣就可以在不刷新頁面的情況下獲取表單的輸入值。

在 Vue 中使用 preventDefault() 方法可以避免一些不必要的頁面跳轉或刷新，更好地提升用戶體驗。同時，它也使得我們能夠精確地控制用戶交互行為，實現更加自然流暢的頁面交互效果。