Vue 事件监听(v-on的基本使用、参数传递、修饰词)

1.1v-on的基本使用1.2v-on的参数传递1.3v-on的修饰词1.1v-on的基本使用在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta n...

蓝眼睛小妖怪

5926人浏览 · 2019-11-14 17:09:31

蓝眼睛小妖怪 · 2019-11-14 17:09:31 发布

1.1 v-on的基本使用
1.2 v-on的参数传递
1.3 v-on的修饰词

1.1 v-on的基本使用
在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
      <h2>{{count}}</h2>
      <!-- <button v-on:click="count++">加</button>
      <button v-on:click="count--">减</button> -->
      <button @click="increment">加</button>
      <button @click="decrement">减</button>
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        count:0
      },
      methods: {
        increment() {
          this.count++
        },
        decrement() {
          this.count--
        }
      }
    })

  </script>
</body>
</html>

使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的语法糖，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。

1.2 v-on的参数传递

(1).事件没传参，可以省略()
(2).事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
(3).如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 事件没传参 -->
    <button @click="btn1click">按钮1</button>
    <button @click="btn1click()">按钮2</button>
    <!-- 事件调用方法传参，写函数时候省略小括号，但是函数本身需要传递一个参数 -->
    <button @click="btn2click">按钮3</button>
    <button @click="btn2click()">按钮4</button>
    <button @click="btn2click(123)">按钮5</button>
    <!-- 事件调用时候需要传入event还需要传入其他参数 -->
    <button @click="btn3click('123',$event)">按钮6</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      methods:{
        btn1click() {
          console.log('btn1 click');
        },
        btn2click(a) {
          console.log('btn1 click++++++',a);
        },
        btn3click(a,event) {
          console.log('btn3 click',a,event)
        }
        
      }
    })
  </script>
</body>
</html>

1.3 v-on的修饰词

.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
.prevent 调用event.preeventDefault阻止默认行为。
.enter监听键盘事件


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() -->
    <div @click='divClick'>aaa
      <button @click.stop='btnClick'>按钮</button>
    </div>
    <!-- 2. .prevent 调用event.preeventDefault阻止默认行为  -->
    <form action="www.baidu.com">
      <button type='submit' @click.prevent='submitClick'>提交</button>
    </form>
    <!--3. 监听键盘的事件 -->
    <input type="text" @keyup="keyup">

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      methods:{
        btnClick(){
          console.log("点击button");
        },
        divClick(){
          console.log("点击div");
        },
        submitClick(){
          console.log("提交被阻止了")
        },
        keyup(){
          console.log("keyup点击")
        }
      }
    })
  </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^