Vue使用的一些实例

1.实现歌曲的点击切换。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: ;
            margin: ;
        }
        ul{
            list-style:none ;
        }
        li{
            border-bottom: solid 1px gray;
        }
    </style>
</head>
<body>
<div id="music">
　　//这里的路径就是下面data里面的，默认是第一首。          绑定一个播放完成的事件。
    <audio :src="currentSong" autoplay="" controls="" @ended="nextSong"></audio>

    <ul>
　　　　//循环拿到歌名和索引，将索引传给点击事件。
        <li v-for='(item,index) in songs' @click="clickHandler(index)">
            <h3>歌名:{{item.name}}</h3>
            <h3>歌手:{{item.author}}</h3>
        </li>

    </ul>
</div>

<script src="../day2/vue.js"></script>
<script>
　　//下面的数据是通过数据库拿，这里模拟一下。
    var songs=[
        {id:,src:'1.mp3',name:"lala",author:"Ryan"},
        {id:,src:'2.mp3',name:"its my life",author:"alex"},
        {id:,src:'3.mp3',name:"gogogo",author:"egon"},
    ]
    var music = new Vue({
        el:"#music",
        data:{
            songs:songs,        //歌曲库
            currentSong:'1.mp3',  //歌曲路径
            currentIndex:,        //当前索引

        },
        methods:{
            clickHandler(index){
　　　　　　　　　　//索引拿到后，去歌曲库拿到对应的歌曲路径。
                this.currentSong=this.songs[index].src;
            },
            nextSong(){
                alert()
　　　　　　　　　　//当歌曲播放完成这个事件才执行。
　　　　　　　　　　//首先是索引+1，然后去到索引+1后的歌曲的路径。
                this.currentIndex++;
                this.currentSong = this.songs[this.currentIndex].src,
            }

        },
        computed:{

        },
        created(){
            //通常用来做页面的初始化
        }
    })
</script>
</body>
</html>

2.下面使用计算属性来实现一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style:none ;
        }
        li{
            border-bottom: solid 1px gray;
        }
    </style>
</head>
<body>
<div id="music">
　　　//这里的：src是绑定的计算属性，默认执行get方法。
    <audio :src="currSong" autoplay="" controls="" @ended="nextSong"></audio>

    <ul>
        <li v-for='(item,index) in songs' @click="clickHandler(index)">
            <h3>歌名:{{item.name}}</h3>
            <h3>歌手:{{item.author}}</h3>
        </li>

    </ul>
    <button @click="addOneSong">添加一首歌</button>
</div>

<script src="../day2/vue.js"></script>
<script>
    var songs=[
        {id:1,src:'1.mp3',name:"lala",author:"Ryan"},
        {id:2,src:'2.mp3',name:"its my life",author:"alex"},
        {id:3,src:'3.mp3',name:"gogogo",author:"egon"},
    ]
    var music = new Vue({
        el:"#music",
        data:{
            songs:songs,
            currentIndex:0,

        },
        methods:{
            clickHandler(index){
　　　　　　　　　　//这里只需要修改索引即可，下面的计算属性会监听到改变从而做出改变。
                this.currentIndex=index
            },
            nextSong(){
                alert(1);
　　　　　　　　　　//播放完也是只需要给索引加1即可。
                this.currentIndex++;
            },
            addOneSong(){
　　　　　　　　　　//这里给歌曲库可以push一些歌曲，当然了下面的依然可以监听到，然后实时的在页面增加。（这里点击后，下面的111会打印。）
                this.songs.push( {id:4,src:'4.mp3',name:"666",author:"egon2"})
            }

        },
        computed:{
            currSong(){
                console.log(111)
                //实时监听songs数据的变化，添加数据songs变化了，所以这个函数会执行
                //也就是增加一首歌，这个函数执行一次，111打印一次。
                return this.songs[this.currentIndex].src
　　　　　　　　　　//只需要拿到索引的src即可。默认为0，这样上面的audio也就执行拿到了这个src。
            }

        },
        created(){
            //通常用来做页面的初始化
        }
    })
</script>
</body>
</html>

3.组件的创建：

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
</div>
<script src="vue.js"></script>
<script>
    //组件的创建
     Vue.component('Vheader',{
            data:function(){   //想要使用组件，data必须是个函数
                return {
                    //必须要return，哪怕是个空对象
                }
            },
            template:`<div class="header">
                        <div class="w">
                            <div class="w-l">
                                <img  src="default.jpg"/>
                            </div>
                            <div class="w-r">
                                <button>登录</button><button>注册</button>

                            </div>
                        </div>
                    </div>`
        })

     var app=new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{},
    })
</script>
</body>
</html>

组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

组件是可以复用的，所以可以写多个。

<div id="app">
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
</div>

给Vheader组件中添加一个按钮，绑定数据属性count，然后你会发现点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

在创建组件过程中第一个参数是组件的名字，第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点：

关于组件名的起名：https://cn.vuejs.org/v2/guide/components-registration.html

1、组件中没有el，因为el仅仅的是绑定Vue的根元素。

2、data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。