Vue指令系统

Vue指令系统和computed

// 常用，所有指令都是v-*的形式，指令系统控制着html标签的显示
v-text 
v-html   // 解析html标签
v-if     // 条件渲染
v-show   // 切换
v-for    // 遍历，指令优先级最高
v-bind   // 绑定属性  简写:属性
v-on     // 绑定事件  简写@事件

v-if 和 v-show

先看html代码 v-if 的作用：

<body>
    <div id="app">
        <h1 v-if = 'show'>{{'hello'}}</h1>  // 'show' 的值是true的时候显示false不现实
    </div>

    <script src="vue.js"></script>
    <script>
        var app = new Vue({     
            el:'#app',          
            data:{              
                msg:'Vue基础',
                show:true，                 // show的值存在data里
            }
        })
    </script>
</body>
</html>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

简单的说就是if 是把标签销毁重建，show只是简单的display:none，频繁切换用v-show

v-on v-bind v-for

vue中使用v-on:click对当前DOM绑定click事件。注意:所有的原生js的事件使用v-on都可以绑定

v-if 和 v-on 来对页面中DOM进行操作
v-bind:class 和 v-on 对页面中DOM的样式切换

v-on 和 v-bind 可以在vue中简写：

v-bind:class ==> :class

v-bind:src ==> :src

v-bind:id ==> :id

v-on:click ==> @click

v-html

    <div id="app" v-html = 'msg'>
        <!--{{msg}}-->  # 如果不用v-html处理，不会解析html，在父标签加就行
    </div>

    <script src="vue.js"></script>
    <script>
        content = `<h3>hello world</h3>`

        var app = new Vue({     
            el:'#app',          
            data:{              
                msg:content
            }
        })
    </script>

v-model

双向数据绑定

v-model = 'markValue' ===> 声明数据属性 ===> 另一个标签使用这个数据

计算属性computed和侦听器watch

侦听器

侦听的是单个属性

watch:{

    数据属性的名字：function(value){

    },
    数据属性的名字2：function(value){

    }
}

计算属性

侦听的是多个属性

计算属性 :默认只有getter方法

<!--点击按钮，触发事件，computed里一个值有修改就会改变-->


  <div id="app">
      <h3>{{person}}</h3>
      <button @click='changePerson'>修改</button>  
  </div>
  
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
          name:'alex',
          age:18
      },
      methods:{
          changePerson(){
              this.name='linhaifeng',
              this.age=20
          }
      },
      computed:{
          // key:value
          person(){
              return `${this.name}的年龄是${this.age}岁`
          }
      }
    })

  </script>

Vue播放Music

多说无益，Music，练习指令系统

用事件实现切换音乐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
    <title>music</title>
</head>
<body>
<div id="music">
    <!--autoplay:是否自动播放，controls:提供播放控件，@ended是音乐结束后触发的事件-->
    <audio :src="crrentSong" autoplay="" controls="" @ended="nextSong"></audio>
    <ul>
        <!--for循环，一看就懂不多说。。-->
        <li v-for='(item,index) in songs' @click="clickHandler(index)">
            <h4>歌名：{{item.name}}</h4>
            <p>歌手：{{item.author}}</p>
        </li>

    </ul>

</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 解耦数据
    var songs = [
        {id:1,src:'1.mp3',name:'童话镇',author:'cyf'},
        {id:2,src:'2.mp3',name:'da ja vu',author:'逮虾户'},
        {id:3,src:'3.mp3',name:'年会',author:'nh'},
        {id:4,src:'4.mp3',name:'童话镇',author:'成依法'},
    ];

    var music = new Vue({
        el: '#music',
        data:{
            songs:songs,
            crrentSong:'1.mp3',
            crrentIndex:0
        },
        methods:{
            // 点击切换
            clickHandler(index){
                this.crrentSong = this.songs[index].src;
                this.crrentIndex = index;
            },
            // 播放完触发的事件
            nextSong(){
                this.crrentIndex++;
                this.crrentSong = this.songs[this.crrentIndex].src
            }
        }
    })
</script>


</body>
</html>

用属性计算实现音乐切换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
    <title>music</title>
</head>
<body>
<div id="music">
    <!--autoplay:是否自动播放，controls:提供播放控件，@ended是音乐结束后触发的事件-->
    <audio :src="currSong" autoplay="" controls="" @ended="nextSong"></audio>
    <ul>

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

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

</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 解耦数据
    var songs = [
        {id:1,src:'1.mp3',name:'童话镇',author:'cyf'},
        {id:2,src:'2.mp3',name:'da ja vu',author:'逮虾户'},
        {id:3,src:'3.mp3',name:'年会',author:'nh'},
        {id:4,src:'4.mp3',name:'童话镇',author:'成依法'},
    ];

    var music = new Vue({
        el: '#music',
        data:{
            songs:songs,
            // crrentSong:'1.mp3',  //直接取计算属性的值
            crrentIndex:0
        },
        methods:{
            // 点击切换
            clickHandler(index){
                // 有了计算属性，index改变就会自动执行下面这一步，所以这里不需要了
                // this.crrentSong = this.songs[index].src;
                this.crrentIndex = index;
            },
            // 播放完触发的事件
            nextSong(){
                this.crrentIndex++;
            },
            addSong(){
                this.songs.push({id:4,src:'4.mp3',name:'童话镇',author:'成依法'})
            }
        },
        // 计算属性，倾听多个属性，计算的是data里的属性
        // 下面是倾听songs和crrentIndex这两个属性，一有改变就触发方法
        computed:{
            currSong(){
                return this.songs[this.crrentIndex].src
            }
        }
    })
</script>


</body>
</html>