「Vue基础」-事件监听(v-on)

公众号:Python野路子

在前端开发中,我们需要经常与UI组件交互时,UI组件能够激发一个相应事件。例如,用户按动按钮、滚动文本、移动鼠标或按下按键等,都将产生一个相应的事件,这个时候我们就必须监听用户发生的事件,在Vue中通过v-on指令来监听DOM事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <!-- 直接CDN方式引入vue.js -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root">
        <!-- 操作操作数值 -->
        <li>{{num1 + 1}}</li>
        <!-- vue事件绑定:v-on:事件 -->
        <!-- 方法去methods里面找。 -->
        <button v-on:click="fun1()"> vue事件绑定</button>
        <!-- 不写函数,写逻辑 -->
        <button v-on:click='num1+= 2'>不执行函数</button>
        <!-- 事件绑定,使用@作为简写 -->
        <button @click='fun2(3)'>vue事件绑定</button>

    </div>
</body>
<script>
    // 生命周期函数:在某一时刻会自动执行的函数
    const app = Vue.createApp({
        data () {
            return {             
                num1: 1,
            }
        },
        methods:{
            fun1(){
                // 操作num1
                this.num1 +=1
            },
            fun2(num){
                //注意:在vm实例中,如果想要获取data上的的数据,或者调用methods中的方法,
                // 必须通过this.数据属性名或this.方法名来进行访问,这里的this就表示我们创建出来的VM实例对象。
                // 注意,VM实例,会监听自己身上data中所有数据的改变,只要数据发生变化,就会自动把最新的数据,
                // 从data上同步到页面中去【好处:程序员只需要关心数据,不需要考虑如何重新渲染DOM页面】
                this.num1 +=num
            }

        }
    });

    const vm = app.mount('#root')

</script>
</html>



这里要注意,方法一定要写在methods中。v-on:click可以写成@click。所有的原生js的事件使用v-on都可以绑定。

Vue事件绑定,除了支持直接绑定到一个方法外(不需要额外参数,那么方法后的()可以不添加。),就是还可以直接在函数中传递参数。

参数传递

不带参数

 <body>
  <div id="app">
   <!-- 不带参 -->
   <button @click="btnClick1">按钮1</button>
   <button @click="btnClick2">按钮2</button>
   <button @click="btnClick3()">按钮3</button>
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data () {
    return {
                    
                }
   },
   methods: {
    btnClick1() {
     console.log('....', event);  // 默认event对象
    },
    btnClick2(args) {
     console.log(args);  // 事件对象
    },
    btnClick3(args) {
     console.log(args);  // undefined
    }
   }
  }).mount('#app');
 </script>


传递参数

 <body>
  <div id="app">
   <!-- 带参 -->
   <button @click="play('野路子', '泡妞')">按钮1</button>

   <!-- 带参又需要事件对象-->
   <button @click="thinking('野路子', 'make money', $event)">按钮2</button>
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
                }
   },
   methods: {
    play(name, hobby) {
     console.log(name, '喜欢', hobby);
    },
    thinking(name, hobby, event) {
     console.log(name, '喜欢', hobby, event);
    }
   }
  }).mount('#app');
 </script>

如果界面上有多个按钮或表单,你想根据用户的不同操作,响应不同的事件,这时你可以通过监听事件源的方式进行处理。在软件系统中,我们常常见到的打开、保存、导出、打印等多个按钮在同一个功能菜单时,就可以用这种方式。我们也可以获取事件,上面例子也提现了,这里再举个例子:

<body>
    <div id="root">
        <button @click="say_no">不说话</button>
        <button @click="say('吃饭', $event)">说话</button>
    </div>
</body>
<script>
    // 生命周期函数:在某一时刻会自动执行的函数
    const app = Vue.createApp({
        data() {
            return {
                
            }
      
        },
        methods:{
            say_no(event){
                console.log(event)

            },
            say(msg, event){
                console.log(msg, event)
            }
        }
    })
    const vm = app.mount('#root')
</script>


从上面我们可以看出来,当不传递参数时默认给我们传递了$event对象,但是当我们想要监听事件源,又想要传递参数时,则需要显示的传递$event对象。

事件修饰符

阻止冒泡事件

应用场景 :以前js阻止冒泡默认事件都用event对象下的自带方法,例如:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>vue实现选项卡功能</title>
  <!-- 直接CDN方式引入vue.js -->
  <script src="https://unpkg.com/vue@next"></script>

  <style>
   .box {
    background: red;
    width: 60px;
    height: 60px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- 阻止冒泡 -->
   <div class="box" @click="boxClick">
    <button @click="btnClick">点我</button>
   </div>
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data () {
    return {
                    
                }
   },
   methods: {
    boxClick() {
     console.log('点击了盒子');
    },
    btnClick() {
     console.log('点击了按钮');
    }
   }
  }).mount('#app');
 </script>
</html>

当点击按钮的时候,发生了冒泡事件,div元素也触发点击事件。

冒泡事件:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级,爷级等等同级的亲戚集是不会触发的。

我们可以类似js中一样,在函数中阻止冒泡事件:

btnClick(event) {
    event.stopPropagation();
 console.log('点击了按钮');
}

Vue中,我们可以通过事件修饰符来阻止冒泡事件:

  <div id="app">
   <!-- 阻止冒泡 -->
   <div class="box" @click="boxClick">
                <!-- 事件修饰符stop-->
    <button @click.stop="btnClick">点我</button>
   </div>
  </div>

阻止默认事件

当我们提交表单的时候,可能会发现提交2次请求,这个时候,

例如:e.preventDefault() ,代码如下:

 <body>
  <div id="app">
   <form action="www.qmpython.com">
    <!-- 点击提交的时候,默认就会往action里面发起请求-->
    <!-- <input type="submit" value="提交">-->
    <!-- 自定义提交,默认会发起两次请求,一次action,一次自定义的-->
    <!-- <input type="submit" value="提交" @click="submitClick" /> -->

    <!-- prevent修饰符阻止默认行为,默认的action就不会请求,只会请求自定义的-->
    <input type="submit" value="提交" @click.prevent="submitClick" />

    <a href="http://www.qmpython.com" @click.prevent="aClick">全民python</a>
   </form>
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
        }
   },
   methods: {
    submitClick() {
     console.log('自定义提交');
    },
    aClick() {
     console.log('点击链接');
    }
   }
  }).mount('#app');
 </script>

按键修饰符

@keyup事件,指按键松开,触发的事件。

 <body>
  <div id="app">
   <input @keyup="getMsg" />
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
        }
   },
   methods: {
    getMsg() {
     console.log(event);
    }
   }
  }).mount('#app');
 </script>

上面,我们看出,只要我们随意敲键盘然后松开,就会触发对应事件。

按键修饰符,只有当事件从特定按键触发时才触发回调。

Vue为最常用的键提供了.enter(回车).tab.delete (捕获“删除”和“退格”键).esc(取消).up(上).down(下).left(左).right(右)等。

 <body>
  <div id="app">
   <input @keyup.enter="getMsg" />
  </div>
 </body>
 <script>
  // 生命周期函数:在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
    
        }
   },
   methods: {
    getMsg() {
     console.log(event);
    }
   }
  }).mount('#app');
 </script>

通过按键修饰符(回车键)修饰之后,只要敲回车键才触发对应事件。


#vue#

举报
评论 0