在Vue中，我們可能需要監(jiān)聽用戶在input框中按下回車鍵后進(jìn)行相應(yīng)的操作，比如提交搜索請求或者提交表單內(nèi)容。而在Vue中，我們可以很方便地通過v-on指令來實(shí)現(xiàn)對回車鍵的監(jiān)聽。

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

當(dāng)用戶在該input框中按下回車鍵時(shí)，就會(huì)自動(dòng)調(diào)用submitForm方法。

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

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

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

這樣，在用戶按下回車鍵的時(shí)候，就會(huì)自動(dòng)調(diào)用submitForm方法。

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

在組件的directives選項(xiàng)中定義私有的enter指令，并在模板中使用即可。這樣，在該組件內(nèi)部，回車鍵按下時(shí)會(huì)自動(dòng)執(zhí)行submitForm方法。

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

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

這樣，用戶在input框中按下回車鍵時(shí)，就不會(huì)觸發(fā)瀏覽器默認(rèn)的提交行為，而是執(zhí)行我們自定義的操作。

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