Vue学习笔记之03v-on事件监听

v-on指令的基本使用

<div id="app">
    <h2>{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <!-- <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button> -->
    <!-- 语法糖 @写法 -->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        counter: 0
      },
      methods: {
        increment() {
          this.counter++
        },
        decrement() {
          this.counter--
        }
      }
    })
  </script>

v-on的参数传递问题

• 第一种情况, 如果方法本身不需要传入参数, 调用方法的时候小括号可以省略
• 第二种情况, 如果方法本身需要传入参数, 但是调用方法的时候没有省略小括号, 也没有传入参数, 那么方法内的变量就是undefined
  • 如果省略了小括号, 但是这个方法本事是需要一个参数传入的, 那么Vue就会默认将浏览器生成的事件对象当作参数传入
• 第三种情况, 如果方法既需要传入一个参数, 又需要传入浏览器生成的事件对象event, 那么要获取这个事件对象event, 就用 $event
• 传入参数的注意事项, 如果传入的参数带引号, 那么这个参数表示一个字符串, 如果这个参数没有引号, 那么这个参数表示一个变量, 注意Vue中的变量都需要在data中定义, 不然会报错

<div id="app">
    <!-- 情况1, 方法本身不需要传递参数, 调用方法时的小括号可以省略 -->
    <button @click="clickBtn1()">按钮1</button>
    <button @click="clickBtn1">按钮1</button>

    <!-- 情况2, 方法本身需要传递一个参数, 调用方法的时候没有省略小括号, 也没有传入参数, 那么这个形参就为undefined -->
    <button @click="clickBtn2('abc')">按钮2</button>
    <!-- 这里就是没有省略小括号, 也没有传入参数, 那么就是undefined -->
    <button @click="clickBtn2()">按钮3</button>
    <!-- 如果省略了小括号, 但是这个方法本事是需要一个参数传入的, 那么Vue就会默认将浏览器生成的事件对象当作参数传入 -->
    <button @click="clickBtn2">按钮4</button>

    <!-- 情况3, 如果在定义方法的时候, 既需要传入一个参数, 又需要传入浏览器产生的event对象 -->
    <!-- 那么要获取这个这个event对象, 就用 $event -->
    <!-- 传入参数的时候注意引号的问题, 有引号表示字符串, 没引号代表变量, $event代表浏览器产生的event对象 -->
    <button @click="clickBtn3('abc', $event)">按钮5</button>

  </div>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        clickBtn1() {
          console.log("按钮1被按了");
        },
        clickBtn2(event) {
          console.log(event);
        },
        clickBtn3(abc, event) {
          console.log(abc, event);
        }
      }
    })
  </script>

v-on的修饰符

• 修饰符是 .修饰符 这样的格式 写在事件类型的后面的
• 停止冒泡修饰符 .stop 例如 @click.stop=()
• 阻止默认行为 .prevent
• 既想停止冒泡 又想阻止默认行为, 那么就要用修饰符串联语法 .stop.prevent
• 想要当事件是从特定的键触发时才触发回调, 那么就用键修饰符, 也可以用键的ASCII码 例如 键修饰符 .enter ASCII码修饰符 .13
• 想要事件只能触发一次 就用 .once 修饰符
• 示例代码

<div id="app">
    <div @click="divClick">
      我是div文字
      <!-- 如果要阻止事件冒泡, 那么就给事件添加修饰符.stop -->
      <button @click.stop="btnClick">我是btn文字</button>

      <!-- 既想要阻止事件冒泡, 又想要阻止标签的默认行为, 那么就需要串联修饰符 -->
      <a href="http://www.baidu.com" @click.stop.prevent="aClick">百度一下</a>
    </div>

    <!-- 如果要阻止标签的默认行为, 就给事件添加修饰符.prevent -->
    <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>

    <!-- 如果只当事件是从特定的键触发时才触发回调, 那么就用键修饰符, 也可以用键的ASCII码 -->
    <input type="text" @keyup.enter="enterOn">
    <input type="text" @keyup.13="enterOn">

    <!-- 如果想要事件只执行一次, 那么就用修饰符.once -->
    <button @click.once="btnClick">只能点击一次</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        divClick() {
          console.log("divClick");
        },
        btnClick() {
          console.log("btnClick");
        },
        aClick() {
          console.log("aClick");
        },
        enterOn() {
          console.log("enterOn");
        }
      }
    })
  </script>