Vue.js---指令与事件、语法糖

指令与事件

指令（Directives）是Vue.js模板中最常用的一项功能，它带有前缀v-，指令的职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。

v-if:

<div id="app">
    <p v-if="show">显示这段文本</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    });
</script>

当数据show的值为true时，p元素会被插入，为false时则会被移除。数据驱动DOM是Vue.js的核心理念，所以不到万不得已时不要主动操作DOM，只需要维护好数据，DOM事Vue会帮我们处理。

v-bind：
v-bind的基本用途是动态更新HTML元素上的属性，比如id、class等。

<div id="app2">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app1 = new Vue({
        el: '#app2',
        data: {
            url:'https://www.baidu.com',
            imgUrl:'http://xxx.xxx.xx/img.png'
        }
    });
</script>

链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。

v-on：
v-on用来绑定事件监听器。

<div id="app3">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.show = false;
            }
        }
    });
</script>

在button按钮上，使用v-on:click给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dblclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身，因此可以使用this.xxx的形式访问或修改数据。

Vue.js将methods里的方法也代理了，所以也可以像访问Vue数据那样来调用方法：

<div id="app3">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.close();
            },
            close: function () {
                this.show = false;
            }
        }
    });
</script>

在handleClose方法内，直接通过this.close()调用了close()函数。在上面示例中是多此一举的，只是用于演示它的用法，在业务中会经常用到，例如以下几种用户都是正确的：

<script>
    var app4 = new Vue({
        el: '#app4',
        data: {
            show: true
        },
        methods: {
            init: function (text) {
                console.log(text);
            }
        },
        mounted: function () {
            this.init('在初始化时调用');
        }
    });
    app4.init('通过外部调用');
</script>

语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bing，可以省略v-bind，直接写一个冒号“：”。

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src="imgUrl">

v-on可以直接用“@”来缩写：

<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>