Day 6 - Vue事件处理

在 Day 5 中我们提到了Vue中的条件渲染，我们用hardcode的方式指派isShow变数的boolean值，但是，假设今天需求改变，我们想透过一个按钮来控制isShow的值，每触发一次button，就将isShow改成false，在按一次再把isShow改回true，这个时候我们要怎麽做呢?

很简单，今天我们将提到 "事件" 的概念。

事件其实就是程序中针对特定行为会触发甚麽特定动作的流程，譬如上面的流程，我们希望使用者按下button後改变isShow的值，按钮称作Event Source，而按钮上会有Event Listener去监听行为有没有被触发，而事件处理者就是触发特定动作後，会交由甚麽动作去执行，例如对应的方法等等。

而"v-on" 其实就是扮演event listener的角色，其作用等於JavaSctipt 中的addEventListener 方法。

那究竟要如何使用v-on呢? 让我们来看看以下程序码。

我们在 button 上以 v-on 呼叫了 changeShowStatus() 这个方法，并在方法内部改变了 isShow 的值。

Vue 中也提供了v-on的语法糖，我们可以用 @click 来取代勒勒长的 v-on:click 就能达到同样的效果。

<template>
  <div id="app">
    <button v-on:click="changeShowStatus"> Click me !</button><br/><br/>
    <span>{{ message }}</span
    ><br />
    <div v-if="isShow">我是 v if true</div>
    <div v-else>我是 v if false</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    changeShowStatus: function () {
      console.log(this.isShow);
      if (this.isShow) {
        this.isShow = false;
      } else {
        console.log("Test");
        this.isShow = true;
      }
    },
  },
};
</script>

以上就是关於v-on的基础用法。

在 JavaScript 里，当监听的事件发生时，EventListener 会去建立一个「事件物件」 (Event Object)， 里面包含了所有与这个事件有关的属性，像是各种事件通用的属性与方法、触发事件的元素等等资讯。 像是大家很常用的 preventDefault() 、 stopPropagation() 等都是由 event 物件所提供的方法。

但有时候我们会需要在Vue中，针对event做一些额外的处理，这时候该怎麽办呢?

事实上， v-on 触发事件时，如果没有指定参数，预设就会将 event 物件当作参数传入。

methods: {
    changeShowStatus(event) {
      console.log(event);
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  }

若印出console，就可以看到物件内容。

不过，我们当然也可以主动选择将event变数传入对应方法中。

<button :class="title" v-bind:title="hint" v-on:click="changeShowStatus($event)">

一旦接收到event变数，我们就可以基於我们的需求来客制化我们的程序，来使用event物件中有的方法如 preventDefault()、stopImmediatePropagation()等等。

不过呢~ 即便我们可以透过直接传入event变数来达成我们的需求，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM 事件细节(将数据处理与页面细节分开)，因此 Vue 为了解决这个问题，也提供以修饰符的方式来处理。
可以参考以下连结:
https://cn.vuejs.org/v2/guide/events.html

以上就是今天的内容。