vue指令扩展：

Vue的指令系统之v-if和v-show,还有个v-else

<div id="box">
    <!--执行add方法并将值展示在页面-->
    {{ add(1, 2) }}
    <!--给button按钮绑定click事件,方法是changeShow-->
    <button v-on:click = 'changeShow'>点击显示隐藏</button>
    <!--isShow为true就显示,为false就隐藏-->
    <div class="t1" v-show="isShow"></div>
    
    <!--官网例子,如果随机数大于0.5就显示Now you see me, 否则就显示Now you don't-->
    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
</div>

数据驱动结构：

// 数据驱动视图
new Vue({
    el: '#box',
    data(){
        return{
            isShow: true
        }
    },
    // 方法都在这里面定义
    methods: {
        add(x, y){
            return x+y
        },
        changeShow(){
            // 点击按钮就取反然后赋值,所以点击就是一直显示隐藏
            this.isShow = !this.isShow
        }
    }
   })

v-if和v-show 等于 true都是表示显示,false表示隐藏:|

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，
则使用 v-show 较好(也可以通过增加class或删除class实现)；如果在运行时条件很少改变，则使用 v-if 较好。

Vue的指令系统之v-bind和v-on

v-bind可以绑定标签中任何属性 比如:img标签的src,a标签的href,id,class,name等 
v-on 可以监听 js中所有事件

简写：
v-bind:src  等价于   :src
v-on:click 等价于 @click

音乐播放器的实现:


    <title>音乐播放器</title>
    <style>
        li.active{
            color: #0079f4;
        }
    </style>
</head>
<body>
<div id="box">
    <!--src绑定当前的索引music_url,@onended播放完成 会自动调用endMusicHandler方法-->
    <audio :src="musicData[currentIndex].music_url" controls autoplay @onended="endMusicHandler"></audio>

    <ul>
        <!--循环musicData,当前currentIndex和index相等时就播放该歌曲并高亮显示-->
        <li v-for="(item, index) in musicData" :key="item.id" :class="{active:index==currentIndex}" @click="musicHandler(index)">
            <p>{{ item.name }}</p>
        </li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var music_list = [
        {
            id: 1,
            name: '忘情牛肉面',
            music_url: './mp3/h3.mp3'
        },
        {
            id: 2,
            name: '心驰神往',
            music_url: './mp3/h1.mp3'
        },
        {
            id: 3,
            name: '西海情歌',
            music_url: './mp3/h2.mp3'
        }
    ];
    let vm = new Vue({
        el: '#box',
        data(){
            return {
                musicData:[],
                currentIndex: 0
            }
        },
        methods:{
            // 接收当前用户选择的index,并赋值给currentIndex
            musicHandler(index){
                this.currentIndex = index;
            },
            endMusicHandler(){
                this.currentIndex++;
                // 如果当前用户选择的index>=musicData的长度就证明到最后了,因此又去到第一首
                if (this.currentIndex >= this.musicData.length){
                    this.currentIndex = 0
                }
            }
        },
        created(){
            this.musicData = music_list
        }
    })
</script>