vue 音訊元件

test.vue

<

template
>
<
div>
<
img 
src="../assets/audio-bg.png"
alt=""
>
<
br>
<
audio 
ref="audio"
@pause
="onpause"
@play
="onplay"
@timeupdate
="ontimeupdate"
@loadedmetadata
="onloadedmetadata"
src=""
controls
="controls"
>
audio
>
div>
template
>
<
script
>
//將整數轉換成 時：分：秒的格式
function
realformatsecond(second) 
else
} export 
default}},
methods: ,
//play () ,
//暫停音訊
pause () ,
//onplay () ,
//當音訊暫停
onpause () ,
//ontimeupdate(res) ,
//當載入語音流元資料完成後，會觸發該事件的**函式
//語音元資料主要是語音的長度之類的資料
onloadedmetadata(res) 
},filters: ,
//將整數轉化成時分秒
formatsecond(second =0
) }
}script
>
<
style
>
style
>

效果如下：

vue元件引入另一vue元件

個人blog，歡迎關注加收藏 在元件中引入另一組件 元件化開發，最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時，可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法，隨著當今前端開發的複雜度更加，這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...

VUE元件學習 元件通訊

儘管父子元件可以通過 this.par ent,this parent,this.parent thi s.child,this.root互相訪問，但是子元件應當避免直接依賴父元件的資料 因為作用域是有層次的，所以我們可以在作用域上傳遞事件。如果要通知整個事件系統，就要向下廣播。每個vue例項都是乙...