## 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 获取元素实例
~~~