掌握vue指令之(6)v-on指令_v-on显示鼠标的坐标-CSDN博客

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106226301

(6).v-on指令：事件绑定

写法： <元素 v-on:事件名=“处理函数名(实参值)”>
简写：<元素 @事件名=“处理函数名(实参值)”，如果处理函数不需要实参值，则()可省略: <元素 @事件名=“处理函数名”
示例1：点哪个div，喊哪个div疼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app>div{
      width:300px;
      height:150px;
    }
    #d1{
      background-color:red
    }
    #d2{
      background-color:green;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="d1" @click="say('d1')"></div>
    <div id="d2" @click="say('d2')"></div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //dname形参可接受点击div时传过来的字符串div名
        say(dname){
          alert(`${dname} 疼!`)
        }
      }
    })
  </script>
</body>
</html>

运行结果
在这里插入图片描述
如果只获取事件对象，不需要传入其他实参值时
示例2：vue中获得鼠标点击位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app>div{
      width:300px;
      height:150px;
    }
    #d1{
      background-color:red
    }
    #d2{
      background-color:green;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="d1" @click="say"></div>
    <div id="d2" @click="say"></div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //当单击div时，显示鼠标点击的位置
        //自动创建event,自动传入事件处理函数第一个参数
        //        ↓
        say(      e    ){
          alert(`x:${e.offsetX}, y:${e.offsetY}`)
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
既想用事件对象，又要传入自定义实参值

手动使用vue提供的$event关键词代替e，手动传参。

$event: vue自动封装的保存DOM事件对象的一个特殊关键词，可用于传参！

 //当事件发生时, vue会自动封装"DOM事件对象e"
 <元素 @事件名="处理函数($event, 实参值)">
 methods:{
 	处理函数(e, 形参1){
 		//e得到的就是DOM中的事件对象，用法也和DOM中一样
 	}
 }

强调: 处理函数中$event与实参值的位置没有固定顺序，但是必须和methods中处理函数定义中的形参列表顺序保持一致！
示例3：点击按钮，既获得div名字，又获得鼠标点击位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app>div{
      width:300px;
      height:150px;
    }
    #d1{
      background-color:red
    }
    #d2{
      background-color:green;
    }
  </style>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="d1" @click="say('d1', $event)"></div>
    <div id="d2" @click="say('d2', $event)"></div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        say(dname,e){
          alert(`点在${dname}的x:${e.offsetX}, y:${e.offsetY}位置`)
        }
      }
    })
  </script>
</body>
</html>