Vue - v-on的使用

最新推荐文章于 2023-06-27 21:39:36 发布

学习中的小菜鸟.

最新推荐文章于 2023-06-27 21:39:36 发布

阅读量1.4w

点赞数 11

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_33962481/article/details/119083134

版权

Vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

文章目录

一、事件监听
- 语法
二、v-on的基本使用
三、v-on的语法糖
四、v-on的参数
五、v-on修饰符

一、事件监听

如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令

语法

v-on:事件=" 操作 "

二、v-on的基本使用

<body>
  <div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods: {
        add() {
          this.counter++
        },
        sub() {
          this.counter--
        }
      },
    })
  </script>
</body>

三、v-on的语法糖

把 v-on: 替换为 @ , 比如v-on:click=" " , 用语法糖写就是 @click=" "

<body>
  <div id="app">
    <h2>{{counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods: {
        add() {
          this.counter++
        },
        sub() {
          this.counter--
        }
      },
    })
  </script>
</body>

四、v-on的参数

1. 如果函数需要参数, 但是没有传入, 那么函数的形参为`undefined`

<body>
  <div id="app">
    <!-- 这里需要传递一个参数 -->
    <!-- <button @click="add(111)">点击</button> -->
    <!-- 如果没有传递参数, 那么形参就是undefined -->
    <button @click="add()">点击</button>  
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        add(name) {
          console.log(name);
        }
      }
    })
  </script>
</body>

2. 如果在事件定义时, 写函数时省略了小括号, 但是方法本身是需要一个参数的, 这个时候Vue会默认传递`event`

<body>
  <div id="app">
    <!-- MouseEvent {isTrusted: true, screenX: 428, screenY: 147, clientX: 32, clientY: 23, …} -->
    <!-- 如果在事件定义时, 写函数时省略了小括号, 但是方法本身是需要一个参数的, 这个时候Vue会默认传递event -->
    <button @click="add">点击</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        add(event) {
          console.log(event);
        }
      }
    })
  </script>
</body>

3. 方法定义时, 我们需要event对象, 同时又需要其他参数

通过$event可以获取到浏览器参数的event对象

<body>
  <div id="app">
    <!-- 通过$event可以获取到浏览器参数的event对象 -->
    <button @click="add(123, $event)">点击</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        add(name, event) {
          console.log(name);
          console.log(event);
        }
      }
    })
  </script>
</body>

五、v-on修饰符

v-on修饰符可以进行一些事件处理.

1. 阻止事件冒泡

<button @click.stop="doThis"></button>

加stop修饰符之前

<body>
  <div id="app">
    <div @click="divClick">
      <button @click="btnClick">点击</button>
    </div>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        btnClick() {
          console.log("按钮点击事件");
        },
        divClick() {
          console.log("div按钮点击事件");
        }
      }
    })
  </script>
</body>

在这里插入图片描述

加stop修饰符之后

<body>
  <div id="app">
    <div @click="divClick">
      <button @click.stop="btnClick">点击</button>
    </div>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        btnClick() {
          console.log("按钮点击事件");
        },
        divClick() {
          console.log("div按钮点击事件");
        }
      }
    })
  </script>
</body>

在这里插入图片描述

2. 阻止默认行为

<button @click.prevent="doThis"></button>

<body>
  <div id="app">
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="inputClick">
    </form>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        inputClick() {
          console.log("自己提交");
        }
      }
    })
  </script>
</body>

3. 阻止默认行为,没有表达式

<button @click.prevent></button>

4. 串联修饰符

<button @click.stop.prevent></button>

5. 键修饰符, 键别名

只当事件是从特点键触发时才触发回调
<input @keyup.enter="onEnter">

<body>
  <div id="app">
    <input type="text" @keyup.enter="onEnter">
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        onEnter() {
          console.log("回车");
        }
      }
    })
  </script>
</body>

6. 键修饰符, 键代码

<input@keyup.13="onEnter">

7. 点击回调只会触发一次

<button @click.once="doThis "></button>

<body>
  <div id="app">
    <button @click.once="oncClick">点击只触发一次</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        oncClick() {
          console.log("只触发一次");
        }
      }
    })
  </script>
</body>