v-on语法

v-on参数

在前端开发过程中，我们呢经常和用户交互，比如点击，键盘等事件，在Vue中监听事件用v-on指令。

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

当通过methods中定义方法，以供@click调用时，需要注意参数问题。

• 如果该方法不需要额外参数，那么方法后的 ()可以不添加。（如果方法本身有一个参数，那么会默认将原生事件中的event参数传递进去)。
• 如果需要同时传入某个参数，同时需要event，可以通过$event传入事件。

<div id="app">
    <!-- 事件调用的方法没有参数，括号可以省略-->
    <button @click="btn1Click()">按钮1</button>
    <button @click="btn1Click">按钮1</button>

    <!-- 在事件定义时，写函数忽略了小括号，但是方法本身需要一个参数的,
      这个时候Vue会默认将浏览器生成的event事件对象作为参数传入到方法-->
    <button @click="btn2Click(123)">按钮2</button>
    <button @click="btn2Click">按钮2</button>

    <!-- 方法定义时，我们需要event对象，同时又需要其他参数 -->
    <!-- 在调用方法，如何手动获取到浏览器参数的event对象：$event -->
    <button @click="btn3Click(abc,$event)">按钮3</button>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        abc: 123
      },
      methods: {
        btn1Click() {
          console.log("btn1Click");
        },
        btn2Click(event) {
          console.log("-------", event);

        },
        btn3Click(abc, event) {
          console.log("+++++", abc, event);
        }
      }
    })

v-on修饰符

在某些情况下，我们拿到event的目的可能时进行一些事件处理。Vue提供了修饰符老帮助我们处理一些事件。

• .stop相当于调用event.stopPropagation()。
• .prevent 相当于调用event.preventDefault()。
• .{keyCode|keyAlias}-只当事件从特定键触发时才触发回调
• .once 只触发一次回调

<div id="app">
    <!-- .stop修饰符的使用，阻止冒泡 -->
    <div @click="divClick">
      aaaa
      <button @click.stop="btnClick">按钮</button>
    </div>

    <!-- 2. .prevent修饰符的使用 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick" @click="submitClick">
    </form>
    <!-- 3. .建通某个键盘的键帽 -->
    <input type="text" @keyup.enter="keyUp">
    <!-- 4..once修饰符的使用 -->
    <button @click.once="btn2Click">按钮2</button>

  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        btnClick() {
          console.log("btnClick");
        },
        divClick() {
          console.log("divClick");
        },
        submitClick() {
          console.log("submitClick");
        },
        keyUp() {
          console.log("keyUp");
        },
        btn2Click() {
          console.log("btn2Click");
        }
      }
    })