Vue教程----监听事件（1)

根据上一章节的内容，我们该章节继续上次的代码，来展示监听事件的案例

一、监听事件的基本事件

1，v-on:click=@click 点击事件
（事件语法中所有的v-on:均可以简写为@）

Html部分

 <div id="counter">
      {{counter}}
      <br />
      <div>一共点击了 {{clicknum}}次</div>
      <button @click="count">事件点击</button>
      <!-- <button v-on:click="count">事件点击</button> -->
    </div>

JS部分

  new Vue({
      el: "#counter",
      data: {
        counter: "Hello World!",
        clicknum: 0,
      },
      methods: {
        count: function () {
          this.clicknum++;
        },
      }
    });

注意：html在绑定vue事件函数时候，不必加上（）括号，且函数所在区域已经被new vue声明绑定（注意id=counter的范围）

效果查看

2，更多事件修饰符

.stop 停止修饰符（中断冒泡）
.prevent 组织提交，在遇到form等表单提交后刷新页面时，阻止强制刷新页面
.capture 优先触发修饰符（出头鸟）
.self 自己才能出发，从子节点响应而来，遇到该函数不触发
.once 只响应一次，有且仅有一次

以上修饰符的用法如下：用@click为例
@click.stop
@click.prevent
@click.self
@click.once
在事件函数后直接加上.修饰符即可

二、修饰符实例

首先我们来实现一个冒泡功能
什么事元素冒泡呢，就是点击子元素，子元素与父元素绑定相同的事件函数，仅此，事件函数不仅仅可以总用于点击的那个元素，同时可以作用于该元素上级所有的上级元素，知道找不到上级元素位置，该种行为，向父级元素冒泡。通俗来讲就是往根节点遍历的意思。

Html

 <div id="content">
      <div id="grandFather" v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
          father
          <div id="me" v-on:click="doc">
            me
            <div id="son" v-on:click="doc">son</div>
          </div>
        </div>
      </div>
      <p>从前到后依次为响应顺序：<br />{{NextInfo}}</p>
    </div>

JS

 new Vue({
      el: "#div1",
      data: {
        VueTest: "Hello World!",
      },
      methods: {},
    });
    var content = new Vue({
      el: "#content",
      data: {
        id: "",
        NextInfo: "",
      },
      methods: {
        doc: function () {
          this.id = event.currentTarget.id;
          this.NextInfo += this.id + "  ";
        },
      },
    });

效果查看：
点击son

点击me

点击father

点击grandfather

使用该种方式有一个值得注意的地方，容易产生很致命的Bug

该出的响应时间doc不会在函数内部直接执行N次，而是根据节点遍历相应的次数，每次都重新执行该函数，所以导致一次点击一次响应只会触发一次，不要在该函数内部声明重置变量等操作
例如：以下操作方式需要特定的场景，否则不必使用

好了， 该章节到此为止，剩余修饰符内容我们下一章见
下一章：监听事件（2）