Vue中的表單操作非常便捷，其中包括聚焦到表單元素上。使用v-focus指令，我們可以讓表單元素自動(dòng)聚焦，從而提高用戶(hù)體驗(yàn)。

Vue.directive('focus', {
inserted: function (el, binding) {
// 取消timeout即可實(shí)現(xiàn)立即聚焦
setTimeout(function(){
el.focus();
}, 0);
}
})

以上代碼創(chuàng)建了一個(gè)v-focus指令，當(dāng)元素插入到DOM中時(shí)，會(huì)自動(dòng)聚焦到該元素上。需要注意的是，由于聚焦操作是異步的，因此需要在一個(gè)setTimeout函數(shù)中執(zhí)行。

使用v-focus指令非常簡(jiǎn)單，只需要在表單元素上加上v-focus屬性即可：

這樣，在頁(yè)面加載時(shí)，頁(yè)面元素就會(huì)自動(dòng)聚焦到該文本框上。

除了頁(yè)面加載時(shí)自動(dòng)聚焦外，我們還可以通過(guò)點(diǎn)擊事件、交互事件等觸發(fā)聚焦操作：

聚焦到文本框// methods中添加以下方法
focusInput () {
this.$refs.textInput.focus();
}

在上述代碼中，我們新增了一個(gè)按鈕，通過(guò)@click事件觸發(fā)focusInput方法，在該方法中，使用$refs獲取文本框元素，然后手動(dòng)調(diào)用focus()方法，即可聚焦到該文本框上。

v-focus指令使得表單操作變得非常簡(jiǎn)便，在一些需要強(qiáng)制用戶(hù)輸入性質(zhì)的交互場(chǎng)景中非常實(shí)用。通過(guò)上述方法，我們可以快速實(shí)現(xiàn)表單元素的自動(dòng)聚焦。