vue之计算属性和侦听器

一、计算属性

鉴定数据属性的变化，数据属性一旦发生变化，会立马更新到视图，默认只有getter，在特殊情况下如果想用setter,也可以加

<script>
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            // 计算:方法(函数:也可以用对象的单体模式);一个页面上可以存放多个函数,可以计算data中多个属性
            computed: {
    // 计算属性方法:默认的getter,只能获取,
    
    reversedMessage: function () {
      // `this` 指向 vm 
      // return就是get,调用reversedMessage,可直接返回
      // this.message.split('').reverse().join('')的值
      return this.message.split('').reverse().join('')
  }
}
})
</script>

<div id="computed">
        <h2>{{message}}</h2>
        <!-- 模板字符串可以放数据属性,也可以函数(直接放函数名)等,你能想到的都可以放 -->
        <h3>{{getMessage}}</h3>
        {{aa}}
        <button @click='clickHandler()'></button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var com =new Vue ({
            el:'#computed',
            data:{
                message:'路飞学城',
                
            },
            methods:{
                clickHandler(){
                    // 点击按钮后,老男孩赋值给message,message改变
                    // 即驱动h2改变;getMessage为监听者,监听到变化,即调用getMessage函数(this.message变化),即{{getMessage}}值发生变化,这就是监听!!

                    // get方法(取值，给data数据属性)
                    // this.message='老男孩';

                    
                    // set方法(给函数赋值，即给函数传参数)
                    this.getMessage = 'oldboy';   
                }

            },
    // computed计算属性作用:实时监听数据变化!!!默认只有getter,(return结果)
            computed:{ 
          
           // get方法
          // getMessage(){
          //     return this.message;
          // }


          // get和set都有的方法
           getMessage:{

                // get方法
               get:function () {
                   /*与getMessage(){return this.message等价*/
                   console.log("get")

                   return this.message;
               },


        //  set方法
            set:function (newValue) {
                console.log("set")
                this.message=newValue;
            }
           }
            }
        })

    </script>

        <!--把一首歌作为一个对象(万事万物皆对象),他就应有自己的一些属性,如:歌名,作者,链接的地址等 -->
    <div id="music">
        <!-- audio类似img标签,有自己的属性,如有src属性,同时有自己的方法，@ended结束(audio在最后会自动调用这个事件),结束就会有下一首歌,   
          autoplay:自动播放;autoloop:自动循环 -->


        <!--如何操作让刷新后默认播放第一首歌,但是点击不同数字,播放相对应歌曲: 
            1.src不能固定,因此一定要!!绑定data(数据属性)中,并先默认为第一首歌(未使用v-bind时,aodios标签中src="currenSong",
            使用后src='./audios/1.mp3')-->
        <audio :src="currenSong" autoplay='autoplay' controls autoloop @ended='nextSong()'></audio>
        <ul>

        <!-- v-for对数组遍历  一个DOM(标签)元素可以加多个指令系统-->
            <li v-for='(item,index) in songs' @click='currentHandler(item,index)'>
                <h3>作者:{{item.author}}</h3>
                <p>{{item.name}}</p>
            </li>
        </ul>

        <button>上一首</button>

        <!-- nextSong的括号()没有参数的时候可以不加 -->
        <button @click='nextSong()'>下一首</button>


        <button @click='addSong'>添加</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var songs = [ /*数组  方便遍历*/
           {id:1,src:'./audios/1.mp3',name:'la la land',author:'Ryan'},
           {id:2,src:'./audios/2.mp3',name:'The Best of',author:'Skillof'},
           {id:3,src:'./audios/3.mp3',name:'It My Life',author:'Bon'},
           {id:4,src:'./audios/4.mp3',name:'Tender',author:'Blur'},
        ];
         

        var music = new Vue ({  /*不用于id music*/
            el:'#music', 
            data:{
                // 数据属性,即music对象拥有的属性
      /*数组*/songs:songs,
              // currenSong:'./audios/1.mp3',

              index:0

            },
            methods: {
                    // 1.带参数的函数item:  等价于li标签中@click='currentHandler(item)   currentHandler(item){this.currenSong=item.src;}//     
                currentHandler(item,index){
                
                    // 为第0首时,用户先点击下一首还是直接点击列表是随机的,
                     // 1.如果用户点击列表,需要将列表歌曲index传给data中的index,如点击第二首,则列表歌曲index为1,赋值给左侧data index为1;
                若此时再点击下一首,则调用nextSong函数,this.index++变为2,即当前需要播放index为2的歌曲,即调用this.currenSong=this.songs[index].src;,
                     this.index=index;


                 //!!!computed可替代        this.currenSong=this.songs[index].src;
                },

                // 在播放当前这首歌时点击下一首;此处index需要在data中声明,默认为第0首;

                nextSong(){
                // b=a++ b=1  a=2//因为等于的运算符优先级大于a++这种形式的运算符，所以先运算=  所以先b先等于a 故b的值为1，a再++ 所以为2；
                    this.index++;/*所以输出this.index比原来大1*/
                    

                    // ???[this.index]不是this.index++?
                    
                //!!!computed可替代    this.currenSong=this.songs[this.index].src;
                    

                    
                },
               // 添加一首歌,push是在数组中添加,点击添加按钮,调用函数往数组中添加一首歌(点击添加事件,),data中songs变化,计算属性监听到,
                 随后return src,赋值给currenSong,随之浏览器显示添加一首歌,audio添加自动播放属性,之后自动播放.
                addSong(){
                    this.songs.push({id:5,src:'./audios/4.mp3',name:'Tender',author:'Blur'});
                    this.index++;
                }
            },
                  // 计算属性: 切换歌就是改currenSong后边的src,注释data中的currenSong
            computed:{
                currenSong(){
                   // songs[this.index]为对象,监听了两个数据属性(songs(数组),index(更改索引,切换歌))
                   // console.log(this.index,"this.index")
                return this.songs[this.index].src;


                 //解释注释methods中部分函数原因(computed可替代,即方法可实现的,计算属性也可以实现):                                  
                // 1.currentHandler(item,index){ this.index=index; 
               // 1.1点击当前这首歌曲.右侧赋值左侧,需要结合computed中set方法才能实现;                                              
               // 如点击第二首歌,index为1,赋值左侧,data中index变为1,(现在currenSong已经对index监听,一旦有变化,)this.index(currenSong)就变为1,
              this.songs[1]就取出来第二个对象,第二个对象链接src取出来第二首歌,然后被return出去,然后currenSong在页面被显示出来

              // this.currenSong=this.songs[index].src;}
               // 2.nextSong(){this.index++;  this.currenSong=this.songs[this.index].src;
               // 原因与上边同

            }
        }

        })
    </script>
</body>
</html>
<!-- 思路:
1.页面刷新后先播放第一首歌,用户切换至下一首歌,改变的是src(currenSong).即下一首按钮处函数nextSong也改变了src, 
2.页面刷新后先播放第一首歌,既需要在audio标签中的currenSong处绑定src,可以使用数据属性(methods),也可以使用计算属性(computed)
3.使用computed,currenSong是方法,有返回值,因此:src="currenSong"后的引号中,可以加字符串函数变量,currenSong返回值是this.songs[index].src;
4.计算属性计算的是数据属性,有数组(songs),索引(index),index默认为0,this.songs[index].src监听,刷新后取出第一首歌
5.点击列表,如点击第二首,index为1,this.index=index;赋值右侧,数据属性中index变为1,即this.songs[index].src监听数据属性的跟着变化,this.songs[1]就取出来
第二个对象,第二个对象链接src取出来第二首歌,然后被return出去,然后currenSong在页面被显示出来,播放第二首歌
6.下一首歌,this.index++,index+1,改变数据属性中index,即this.songs[index].src监听数据属性的跟着变化-->