Vue 方法与事件（三）

1、v-on 指令类似原生 Javascript 的 onclick 等写法，也是在 html 上进行监听的。例如：

<template>
  <div id="app">
    点击次数：{{ counter }}
    <button @click="counter++">+1</button>
  </div>
</template>
<script>

export default {
  name: 'App',
  data() {
    return {
        counter: 0
    }
  }
}
</script>

Vue.js 给 v-on 指令提供了语法糖，也可以说是缩写，可以省略 v-on，直接写一个 @：

<button v-on:click="counter++">+1</button>
<!-- 缩写为 -->
<button @click="counter++">+1</button>

2、@click 的表达式可以直接使用 Javascript 语句，也可以是一个在 Vue 实例中 methods 选项内的函数名，

比如对上例进行扩展，再增加一个按钮，点击一次，计数器加 10：

<template>
  <div id="app">
    点击次数：{{ counter }}
    <button @click="handleAdd()">+1</button>
    <button @click="handleAdd(10)">+10</button>
  </div>
</template>
<script>

export default {
  name: 'App',
  data() {
    return {
        counter: 0
    }
  },
  methods: {
    handleAdd: function(count) {
      count = count || 1;
      // this 指向当前 Vue 实例
      this.counter += count;
    }
  }
}
</script>

@click 调用的方法名后可以不跟括号“()”。此时如果该方法有参数，默认会将原生事件对象 event 传入。

在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。

3、Vue 提供了一个特殊变量 $event，用于访问原生 DOM 事件，例如下面的实例可以阻止链接打开：

<template>
  <div id="app">
    <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    handleClick: function(message, event) {
      event.preventDefault();
      window.alert(message);
    }
  }
};
</script>

 

 

 

参考：

《Vue.js 实战》

https://cn.vuejs.org/v2/guide/