VUE是一款開源的JavaScript框架，由于其簡單易學的特點，成為了眾多開發人員的首選。作為一款WEB應用框架，VUE自帶了很多實用的功能，其中的BGM功能便是一大亮點。

在VUE中，使用BGM功能需要引入一個audio標簽，并在data中設置BGM的相關參數。

<audio ref="bgm" loop src="../assets/bgm.mp3"></audio>
<script>
export default {
data () {
return {
bgm: null,
bgmStatus: true //BGM狀態，默認為開啟
}
},
created () {
this.initBGM()
},
methods: {
initBGM () { //初始化BGM
this.bgm = this.$refs.bgm
if (this.bgm) {
this.bgm.play()
if (!this.bgmStatus) {
this.bgm.pause()
}
}
},
bgmToggle () { //切換BGM狀態
this.bgmStatus = !this.bgmStatus
if (this.bgmStatus) {
this.bgm.play()
} else {
this.bgm.pause()
}
}
}
}
</script>

在上面的代碼中，我們首先引入了一個audio標簽，并且設置了它的屬性ref，從而獲取音頻對象。然后在data中設置了一個BGM狀態，默認為開啟。在created()生命周期鉤子函數中，調用了initBGM()方法，用來初始化BGM。

接下來，在methods中定義了兩個方法：initBGM()和bgmToggle()。initBGM()用來初始化BGM，首先獲取到audio對象，然后判斷BGM狀態是否開啟，若開啟，則調用play()方法播放BGM；否則調用pause()方法暫停BGM。bgmToggle()用來切換BGM狀態，將BGM狀態取反，并根據狀態調用play()或者pause()方法。

最后，在模板中使用button綁定bgmToggle()方法，用來切換BGM狀態。

<button @click="bgmToggle">{{ bgmStatus ? '關閉BGM' : '開啟BGM' }}</button>

通過上面的代碼，我們就可以很方便地在VUE中添加BGM了，不僅可以為我們的WEB應用增添氛圍，而且還能夠提高應用的用戶體驗。