Vue的focus指令可以將指定的元素設(shè)置為焦點(diǎn)。它可以應(yīng)用于input、textarea、甚至是自定義組件。使用該指令非常簡(jiǎn)單，只需將v-focus綁定到元素上即可。

<template>
<div>
<input type="text" v-focus/>
</div>
</template>
<script>
export default {
directives: {
focus: {
// 指令定義
inserted: function (el) {
el.focus()
}
}
}
}
</script>

上述代碼中，我們定義了一個(gè)directive，名稱為focus，該directive的inserted函數(shù)是指令首次綁定到元素時(shí)觸發(fā)的函數(shù)。在該函數(shù)中，我們可以使用el.focus()將元素設(shè)置為焦點(diǎn)。接著，我們將focus指令注冊(cè)到Vue實(shí)例的directives選項(xiàng)中，這樣就可以在模板中使用v-focus指令。

如果想指定一個(gè)元素為焦點(diǎn)，可以通過(guò)v-focus指令讓它獲得焦點(diǎn)。

<template>
<div>
<input type="text" v-focus/>
<button v-on:click="setFocus"/>set focus</button>
</div>
</template>
<script>
export default {
directives: {
focus: {
// 指令定義
inserted: function (el) {
el.focus()
}
}
},
methods: {
setFocus: function () {
this.$refs.input.focus()
}
}
}
</script>

在上面的代碼中，我們給input元素綁定了v-focus指令。同時(shí)，我們也綁定了一個(gè)按鈕和一個(gè)方法。當(dāng)點(diǎn)擊按鈕時(shí)，它將調(diào)用setFocus方法，該方法獲取ref="input"的元素，并調(diào)用其focus方法，將該元素設(shè)置為焦點(diǎn)。

使用Vue的focus指令可以在需要時(shí)非常方便地將元素設(shè)置為焦點(diǎn)。當(dāng)我們需要在輸入框（或其他元素）上自動(dòng)設(shè)置焦點(diǎn)時(shí)，該指令將非常有用。