10. vue常用指令 v-on 给元素绑定监听事件

最新推荐文章于 2023-06-18 21:29:22 发布

神奇洋葱头

最新推荐文章于 2023-06-18 21:29:22 发布

阅读量780

点赞数

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

本文链接：https://blog.csdn.net/qq28129019/article/details/118481350

版权

文章目录

1. v-on指令是什么
2. v-on 指令的用法
3. v-on指令的注意点
4. v-on指令常用修饰符
5. v-on指令的按键修饰符

1. v-on指令是什么

v-on指令专门为元素绑定监听事件

2. v-on 指令的用法

2.1 v-on指令基本格式

通过v-on指令绑定监听事件,那么在指定事件名称时不需要写 on,即 v-on:click,而不是 v-on:onclick
通过v-on指令绑定监听事件,那么在赋值的时候必须在Vue对象中赋值一个回调函数名称
v-on:click 指令可以简写为 @click

<!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>
  <!--步骤1 引入vue.js-->
  <script src="js/vue.js"></script>
  <!--也可以使用在线引用-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
</head>
<body>
  <div id="app">
    <button v-on:click="showMsg">我是按钮</button> <br/>
    <button @click="showMsg">我是按钮-简写</button>
  </div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
    
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
    
        name: "lchh",
        age: 18,
      },
      methods: {
    
        showMsg(){
    
          alert('123456');
        }
      } 
    });
  </script>
</body>
</html>

在这里插入图片描述

2.2 v-on:click.stop 阻止事件冒泡

事件冒泡

<!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>
  <!--步骤1 引入vue.js-->
  <script src="js/vue.js"></script>
  <!--也可以使用在线引用-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
  <style>
    .A{
    
      width: 300px;
      height: 300px;
      background-color: blue;
    }

    .B{
    
      width: 200px;
      height: 200px;
      background-color: blueviolet;
    }

    .C{
    
      width: 100px;
      height: 100px;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--阻止事件冒泡-->
    <div class="A" @click="clickA">
      <div class="B" @click="clickB">
        <div class="C" @click="clickC"></div>
      </div>
    </div>
  </div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
    
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
    
        name: "lchh",
        age: 18,
      },
      methods: {
    
        clickA(){
    
          console.log("点击A");
        },
        clickB(){
    
          console

最低0.47元/天解锁文章

神奇洋葱头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
10. vue常用指令 v-on 给元素绑定监听事件

文章目录1. v-on指令是什么2. v-on 指令的用法2.1 v-on指令基本格式2.2 v-on:click.stop 阻止事件冒泡事件冒泡阻止事件冒泡2.3 v-on:click.self 只有当前元素自身触发回调函数才会执行2.4 v-on:click.capture 事件捕获2.5 v-on:click.prevent 阻止默认事件2.6 v-on:click.once 只触发一次回调3. v-on指令的注意点3.1 如果回调函数不需要传递参数,那么可以把()去掉3.2 如果回调函数
复制链接

扫一扫