Vue.js 的指令与事件

1、指令与事件

        指令（Directives）是 Vue.js 模板中最多见的一项功能，它带有前缀 v- ，好比 v-if、v-html、v-pre 等。指令的主要指责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上，以 v-if 为例：

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

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

        Vue.js 内置了不少指令，帮助咱们快速完成常见的 DOM 的操做，好比循环渲染、显示与隐藏等。好比，v-bind 和 v-on 。

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

<div id="app">
    <a v-bind:href="url">连接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.github.com',
            imgUrl: '/img.jpg'
        }
    })
</script>

        上述例子中的连接地址与图片的地址都与数据进行了绑定，当经过各类方式改变数据时，连接和图片都会自动更新。

        另外一个很是重要的指令就是 v-on ，它用来绑定事件监听器，这样咱们就能够作一些交互了。例如：

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        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 的形式来访问或修改数据，如示例中的 this.show = false；把数据 show 修改成了 false，因此点击按钮时，文本 p 元素就被移除了。

        表达式除了方法名，也能够直接是一个内联语句，上例也能够改写为：

<div id="app">
        <p v-if="show">Vue v-if指令</p>
        <button v-on:click="show = false">隐藏/显示</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true
            }
        })
    </script>

        若是绑定的事件要处理复杂的业务逻辑，仍是在 methods 里声明一个方法，这样而可读性更强也好维护。Vue.js 将 methods 里的方法也代理了，因此也能够像访问 Vue 数据那样来调用方法：

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.close();
            },
            close: function () {
                this.show = false;
            }
        }
    })
</script>

        在 handleClose 方法内，直接经过 this.clolse() 调用了 close() 函数，也能够在 Vue 实例外部调用：

 

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

    app.init('在 Vue 实例外部调用');        // 在 Vue 实例外部调用

</script>

2、语法糖

        语法糖是指在不影响功能的状况下，添加某种方法实现一样的效果，从而方便程序开发。

        Vue.js 的 v-bind 和 v-on 指令都提供了语法糖，也能够说时缩写，好比 v-bind，能够省略 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>

        使用语法糖能够简化代码的书写。