vue指令

1）指令（Directives）就是特殊的，以带有前缀v-的特性。

　　简单粗暴来说，标签里v-开头的就是指令（当然，要Vue能支持）。

　　指令的值限定为 绑定表达式，就是等号后引号里的。

<div id="app">  
    <div v-if="html">  
        {{val}}  
    </div>  
    <button onclick="test()">消失上一行</button>  
</div>  
<script>  
    var vm = new Vue({  
        el: "#app",  
        data: {  
            html: "abc",  
            val: "11"  
        }  
    })  
    function test() {  
        vm.html = "";  
    }  
</script>  

输出：11

2）指令后边添加参数

有些指令（例如v-bind）可以在名称后等号前，添加一个属性，这个属性的作用是响应性的更新HTML特性。

<style>  
    .white {  
        background-color: white;  
    }  
  
    .black {  
        background-color: black;  
    }  
</style>  
<div id="app">  
    <div v-bind:class="BC">背景颜色变化</div>  
    <button onclick="test()">消失上一行</button>  
</div>  
<script>  
    var vm = new Vue({  
        el: "#app",  
        data: {  
            BC: "black"  
        }  
    })  
    function test() {  
        vm.BC = "white";  
    }  
</script>  

初始情况下，这个div的class和data里的BC绑定，由于BC的值是black，那么相当于v-bind所在的标签的class=”black”，所以初始情况下，背景颜色为黑色。

当点击按钮后，BC的值被更改为white，那么相当于标签的class=”white”，而类white的背景颜色为白色，所以该div的背景颜色变成了白色。

v-on的缩写是@

v-bind的缩写是:就是冒号