十一、其他

一、获取Dom

//1.给元素设置ref属性
<p @click="getDom" ref="music">音乐播放</p>
//2.this.$refs.music
export default {
  ...
  methods: {
    getDom(){
      console.log(this.$refs.music)
    }
  }
};

二、获取组件下标

<div class="main-box" > 
        <div :class="[(index+1)%2==1?'border':'']" v-for="(item,index) in musics" :key="item.id" @click="handleIndex(item.id,index)" :data-index="index" >
            <ItemBox :data="item"></ItemBox>
        </div>

   handleIndex(id,index) {
      console.log(index);
   }

三、音乐播放

控制Dom

<p @click="getDom" ref="music">音乐播放</p>
getDom(){
            console.log(this.$refs.music)
        }

<audio @play="onPlay" @pause="onPause" ref="audio" :src="playUrl" controls></audio>
play(){
            if(this.isPlay){
                this.$refs.audio.pause()
                this.isPlay = false
            }else{
                this.$refs.audio.play()
                this.isPlay = true
            }
        },

@play对应 播放状态
@pause对应 暂停状态

四、event对象

注意在事件中要使用 $ 符号

//html部分
<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
//js部分
showEvent(event){
    //获取自定义data-id
    console.log(event.target.dataset.id)
   //阻止事件冒泡
    event.stopPropagation(); 
    //阻止默认
    event.preventDefault()
}

五、vue中对象更改检测的注意事项

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a`  响应式属性
vm.b = 2
// `vm.b`  非响应式属性

5-1 添加属性

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
你可以添加一个新的 age 属性到嵌套的 userProfile对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set实例方法，它只是全局Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)

5-2 添加多个属性

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign()或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

六、数据劫持

• 当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。
• 既然如此，我们当然可以在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。
• 在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知。

  6-1 Object.defineProperty(obj,prop,descriptor):

  参考文档 参考文档
  vue.js 则是采用Object.defineProperty()来实现数据的劫持的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时立马能侦听到从而调用setter和getter做对应的处理。
  作用： ```javascript Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回 这个对象。

//语法： Object.defineProperty(obj, prop, descriptor)

//参数说明： obj：必需。目标对象 prop：必需。需定义或修改的属性的名字 descriptor：必需。目标属性所拥有的特性

//返回值： 传入函数的对象。即第一个参数obj

<a name="goOUk"></a>
### 6-2 代理对象
通过代理对象来访问目标对象，可以实现数据的劫持。<br />在代理的设计模式中，有目标对象、代理对象和事件处理程序，通过代理对象来访问目标对象，可以实现对目标对象的访问权限控制以及数据的劫持工作
```javascript
    //创建一个事件处理器
    const handler = {
        get: function(obj, prop){
            console.log('A value has been accessed');
            return obj[prop];
        },
        set: function(obj, prop, value){
            obj[prop] = value;
            console.log(`${prop}is being set to${value}`);
        }
    }
    //目标对象
    const initialObj = {
        id: 1,
        name: 'Foo Bar'
    }
    //代理对象
    const proxiedObj = new Proxy(initialObj, handler);
    //给代理对象赋值，会调用handler这个事件处理程序，然后调用事件处理程序中的set方法间接访问目标对象，给目标对象赋值
    proxiedObj.age = 24