vue-one_demo

vue-one_demo_music

简单的音乐盒子
利用计算属性(监听数据)，解决上一首，下一首，点击切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
        }

        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after,
        /* 清除浮动*/
        q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        li{
            border: 2px solid deepskyblue;
            padding: 5px;
        }
    </style>
</head>
<body>
<!-- autoplay 自动播放 调整音量 自动循环 @ended 自动下一首 -->
<div id="music">
    <!-- :scr 要链接下面的数据 要通过指令系统-->
    <audio :src="currentSong" autoplay controls autoloop @ended = 'nextSong()'></audio>
    <ul>
        <!--  点击换歌  -->
        <li v-for = '(item, i) in songs' @click = "currentHandler(i)">
            <h3>作者:{{item.author}}</h3>
            <p>{{item.name}}</p>
        </li>
    </ul>
    <button @click = 'upSong'>上一首</button>      <!-- 方法名，不加参数可以不写() -->
    <button @click = 'nextSong'>下一首</button>
    <button @click = 'addSong'>添加</button>
    <!-- @click 方法-->
</div>

 <!--MVVM  Model==》数组  数据库 View == document 标签 上面的div VM-->

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 数据的双向绑定 m<=>v
    var songs = [
                {id:1,src:'./audios/audios/1.mp3',name:"水瓶座",author:'陈晓东'},
                {id:2,src:'./audios/audios/2.mp3',name:"倾城",author:'陈奕迅'},
                {id:3,src:'./audios/audios/3.mp3',name:"海阔天空",author:'Beyond'},
                {id:4,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'}

            ];
    var music = new Vue({
        el:'#music',
        data:{
            // 数据属性Model
            songs : songs,
//            currentSong : "./audios/audios/1.mp3",
            index:0
        },
        methods:{
            //  事件名方法要在这里声明
            currentHandler(i){    // 点击歌名换歌
                this.index = i;   //  这里绑定了数据属性，一改就调动下面的计算属性
//                this.currentSong = this.songs[i].src;
            },
            nextSong(){
                this.index++;
//                this.currentSong = this.songs[this.index].src;
            },
            upSong(){
                this.index = this.index-1;
//                this.currentSong = this.songs[this.index].src;
            },
            addSong(){
                this.songs.push( {id:5,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'})
            }
        },
        computed:{      // 计算属性，实行监听
            currentSong(){
                return this.songs[this.index].src
            }
        }
    })
</script>
</body>
</html>