設置和獲取焦點是Web開發中常見的需求。在Vue中，我們可以使用v-focus指令來實現這個功能。值得注意的是，這個指令并不是Vue自帶的，需要我們自己定義。

首先，我們需要在Vue實例中定義v-focus指令。

vue.directive('focus',{
inserted : function(el) {
el.focus();
}
})

這段代碼的含義是在Vue中定義了一個名為focus的指令，并且在inserted鉤子函數中給目標元素設置了焦點。

接下來，在需要設置焦點的元素中加入v-focus指令。

這段代碼中，我們在一個輸入框上使用了v-focus指令。這個輸入框在插入到DOM樹中后，會自動獲得焦點。

接下來我們來看一下如何通過v-focus獲取焦點元素的引用。

Vue.directive('focus', {
inserted: function (el, binding) {
if (binding.value) {
el.focus()
}
},
update:function(el, binding) {
if(binding.oldValue !== binding.value && binding.value === true){
el.focus()
}
}
})

在這段代碼中，我們實現了update鉤子函數。這個鉤子函數會在VNode更新時被調用。我們對比了指令的newValue和oldValue，如果它們不同且newValue為真，就讓元素獲得焦點。

為了使用這個功能，我們需要在需要設置焦點的元素上綁定一個變量。

然后我們在Vue實例中定義isFocused這個變量，并將它設置為true。

new Vue({
el: '#app',
data: {
isFocused: true
}
})

這樣在檢查DOM樹中的元素時，就可以通過訪問isFocused變量的值獲得焦點元素的引用。

總的來說，通過Vue自定義指令，在不同的生命周期函數中操作視圖元素，我們可以很方便的實現設置和獲取焦點的功能。實現方式流暢簡潔，使用起來也很方便。