2.2 指令与事件

指令（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: true
              }
            })
        </script>

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

Vue.js内置了很多指令，帮助我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。在第5章会详细地介绍这些内置指令，但在此之前，你需要先知道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: 'http://xxx.xxx.xx/img.png'
              }
            })
        </script>

示例中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。上述示例渲染后的结果为：

        <a href="https://www.github.com">链接</a>
        <img src="http://xxx.xxx.xx/img.png">

以上是介绍v-bind最基本的用法，它在Vue.js组件中还有着重要的作用，将在第4章和第7章中详细介绍。

另一个非常重要的指令就是v-on，它用来绑定事件监听器，这样我们就可以做一些交互了，先来看下面的示例：

        <div id="app">
            <p v-if="show">这是一段文本</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">这是一段文本</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">这是一段文本</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.close()调用了close()函数。在上面示例中是多此一举的，只是用于演示它的用法，在业务中会经常用到，例如以下几种用法都是正确的：

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

          app.init(’通过外部调用’);   //在Vue实例外部调用
        </script>

更多关于v-on事件的用法将会在第7章中详细介绍。