文档初探(六): 事件处理

监听事件

下面是最简单的监听事件的 demo:

new Vue({
  el: "#app",
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="count ++">+1</button>
    </div>
  `,
  data() {
    return {
      count: 0
    };
  }
});

传参的事件处理

new Vue({
  el: "#app",
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="add(n)">+{{n}}</button>
    </div>
  `,
  data() {
    return {
      n: 2,
      count: 0
    };
  },
  methods: {
    add(n) {
      this.count += n;
    }
  }
});

这里add(n)应该是一个函数调用而不是声明函数, 这在 JS 里是一个错误的写法, 正确的写法应该是在外层包裹一个匿名函数: ()=>{add(n)}(React 也是这么处理的), 但是 Vue 会在编译时会帮我们包裹上. 所以这里并没有错. 这种做法对小白是很友好的, 以至于 JS 的基础都不做很高的要求就能上手 Vue, 但老手们却有更复杂的需求, Vue 的一些自作主张的做法会限制到他们. 还是以这里举例, 如果在add()里返回一个x函数, 按照 JS 的执行方式, add会立刻执行, 执行的结果就是返回一个x函数, x函数才是这个点击事件的回调函数, 而 Vue 的做法是将add函数作为点击事件的回调, 最后我们只能得到一个x函数, 而无法调用到它. 这个例子确实看上去很牵强不合理, 但是它能反映出这个问题. 小白喜欢 Vue, 老手喜欢 React.Things just like this.

获取e参数

我们在 DOM 的监听函数(addEventListener(event, callback(e)))里要获取事件发生的元素可以在callback里传入e, 在 Vue 里, 我们可以用$event获取:

new Vue({
  el: "#app",
  template: `
    <div>
      <p>{{count}}</p>
      <button @click="add(n, $event)">+{{n}}</button>
    </div>
  `,
  data() {
    return {
      n: 2,
      count: 0
    };
  },
  methods: {
    add(n, e) {
      this.count += n;
      console.log(e); // MouseEvent {isTrusted: true, constructor: Object}
    }
  }
});

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive