## v-items
### 組件綁定
### 參數
* class string 類型
* default bollen 類型
默認情況下,頁面中沒有定義焦點,我們可以綁定在任意html元素 或組件([components](https://cn.vuejs.org/v2/guide/components.html))上
### **HTML**
~~~
//在元素上使用 v-items 指令注冊焦點元素
<div class="shop-list-item" v-items v-for="item in list" @click="itemClick(item)">
<div class="title">{{item.title}}</div>
</div>
~~~
### **JS**
~~~
export default {
name: 'example',
data() {
return {
list:[{id:1,title:'第一個測試焦點'}]
}
},
methods:{
//元素點擊事件
itemClick(item){
console.log(`${item.id} - ${item.title}`)
}
}
}
~~~
### 設置及獲取默認焦點
通過 **default:true** 來設置默認焦點,組件加載完成后會自動在默認焦點上響應 fouces 事件,并設置focus 樣式
通過 **class:'new_focus_class'** 來設置新的焦點樣式
### **HTML**
~~~
<div class="my nav-item" v-items="{default:true}" >
<div class="translate-block">
<div class="title">首頁</div>
</div>
</div>
<div class="search nav-item" v-items="{default:true}">
<div class="translate-block">
<div class="title">最新</div>
</div>
</div>
<div class="lottery nav-item" v-items={class:'curr'} >
<div class="translate-block">
<div class="title">最熱</div>
</div>
</div>
~~~
也可以通過 綁定值來設置是否為默認焦點,通常頁面只有一個默認焦點,如果出現多次,則默認會以最后一個為準
### 通過服務獲取默認焦點
### **JS**
~~~
this.$service.pointer //返回為一個epg 的pointer對象,可以調用pointer.$el 獲取元素實例
~~~