1、什么是ref？
ref是用于快速定位到dom结构，vue中一般不去操作dom结构，他是数据驱动的。jQuery会疯狂操作DOM
<audio ref:'aa' src:'音乐地址'></audio>
mounted(){ let h = this.$refs.aa }
案例音乐播放案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <audio ref='audio' src="./vadio/王茗 - 大眠 (男声版).mp3" controls autoplay></audio> <div> <button @click='play'>播放</button> <button @click='pause'>暂停</button> </div> </div> <script> new Vue({ el:"#app", data:{ }, mounted(){ console.log(this.$refs.audio) }, methods:{ play(){ this.$refs.audio.play() }, pause(){ this.$refs.audio.pause() } } }) </script> </body> </html>
里面的video中的 src属性可以链接本地的音乐，或者是网上的音乐api地址
2 ref使用场景：
音乐 播放 视频播放 歌词等等
3 vue中的注意点
vue中尽量少的去操作dom，除非需求必须借助于操作dom实现