在Vue中，我們可能需要監聽用戶在input框中按下回車鍵后進行相應的操作，比如提交搜索請求或者提交表單內容。而在Vue中，我們可以很方便地通過v-on指令來實現對回車鍵的監聽。

在Vue2.x中，我們可以直接在input標簽上通過v-on指令來監聽鍵盤事件，其中keyCode為13即為回車鍵。例如：

當用戶在該input框中按下回車鍵時，就會自動調用submitForm方法。

然而，在Vue3.x中，keyCode已經被棄用，我們需要使用key來替代。同時，為了更好地重用代碼和提高代碼可讀性，我們可以將回車鍵按下時的事件封裝成一個自定義的指令。

// 注冊全局自定義的指令
app.directive('enter', {
// 指令的定義
mounted(el, binding) {
el.addEventListener('keydown', (e) =>{
if (e.key === 'Enter') {
binding.value();
}
});
},
});

然后，我們只需要在需要監聽回車鍵的地方使用v-enter指令即可。例如：

這樣，在用戶按下回車鍵的時候，就會自動調用submitForm方法。

除了全局自定義指令外，我們也可以在組件內部定義局部自定義指令。例如：

在組件的directives選項中定義私有的enter指令，并在模板中使用即可。這樣，在該組件內部，回車鍵按下時會自動執行submitForm方法。

值得注意的是，在監聽回車鍵事件時，我們需要考慮到input框是否有其他輸入事件（如input、change等）已經與回車鍵事件綁定了，造成回車鍵失效。因此，我們需要在keydown事件中調用event.preventDefault()方法，來阻止瀏覽器默認的提交行為。

app.directive('enter', {
mounted(el, binding) {
el.addEventListener('keydown', (e) =>{
if (e.key === 'Enter') {
e.preventDefault();
binding.value();
}
});
},
});

這樣，用戶在input框中按下回車鍵時，就不會觸發瀏覽器默認的提交行為，而是執行我們自定義的操作。

在實際開發中，監聽回車鍵事件是一個非常常見的操作，而Vue提供的v-on指令和自定義指令非常方便地幫助我們實現了這一功能。