Vue学习（4） - 爱码网

1.{{}}模板语法、插值、简单运算
2.指令系统
v-if 真正销毁重建
v-show 更改css的display，用于重复切换出现

v-bind 绑定属性：
v-on 绑定事件 @
v-for 遍历，优先级相对高
v-html 解析html标签
v-model 只适用于在表单控件双向数据绑定的一个体现

双向数据绑定=单向数据绑定+UI监听

网站设计一共有23中模式
最常使用使用的三种：
MVC MVVM MTV

MVVM
Model View ViewModel

流程控制

3.computed计算属性
默认值有getter

网页音乐播放

1.用事件控制的写法

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <style>
        *{
            padding: 0;
            /* margin: 0; */
        }
        ul{
            list-style:none;
        }
        li{
            border-bottom: 1px solid gray;
        }
    </style>

</head>
<body>
    <div id="music">
        <audio :src='song' autoplay="" controls="" @ended="next" ></audio>
        <ul>
            <li v-for='(item,index) in songs' @click='huange(index)'>
                <h3>歌名：{{item.name}}</h3>
                <p>歌手：{{item.author}}</p>
            </li>
        </ul>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var songs = [
            {id:1,src:"./audio/1.mp3",name:"111",author:"111111"},
            {id:2,src:"./audio/2.mp3",name:"112",author:"211111"},
            {id:3,src:"./audio/3.mp3",name:"113",author:"311111"},
            {id:4,src:"./audio/4.mp3",name:"114",author:"411111"}
        ];
        var music=new Vue({
            el:'#music',
            data:{
                song:"./audio/1.mp3",
                songindex:0,
                songs:songs,
            },
            methods:{
                huange(index){
                    this.song=this.songs[index].src;
                },
                next(){
                    this.songindex++;
                    this.song=this.songs[this.songindex].src;
                },
            },
            computed:{

            },
            create(){
                //页面初始化
            }
        })

    </script>
    
</body>
</html>

View Code