前言

系列文章目录：

[Vue]目录

老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. 事件处理

1.1 事件绑定指令

vue提供了v-on:事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

原生的DOM对象有onclick、oninput等原生事件，在vue中可以使用v-on:click、v-on:input等来监听DOM元素的对应事件，并为其绑定相应的事件处理函数，其中事件处理函数需要在vue实例对象的methods节点中进行声明。

v-on: 简写为 @。

1.2 元素事件绑定代码示例

<!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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          alert('你好！')
        },
        show2() {
          alert('你好！！')
        },
      },
    })
  </script>
</body>
</html>

1.3 事件处理函数的参数

事件处理函数不进行参数的传递，默认会有一个参数，即事件的触发对象。

<!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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e) {
          alert('你好！')
          console.log('提示信息1')
          console.log(e)
        },
        show2(e) {
          alert('你好！！')
          console.log('提示信息2')
          console.log(e.target)
        },
      },
    })
  </script>
</body>
</html>

向事件处理函数显示的传递事件的触发对象，可以在绑定事件处理函数时，传入参数$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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1($event)">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e) {
          alert('你好！')
          console.log('提示信息1')
          console.log(e.target)
        },
        show2(e) {
          alert('你好！！')
          console.log('提示信息2')
          console.log(e.target)
        },
      },
    })
  </script>
</body>
</html>

向事件处理函数传递其他参数的同时，传递事件的触发对象，此时，如果不显示的传递事件的触发对象，则事件的处理函数不会接收到事件触发对象这个参数。

<!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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button v-on:click="show1($event, '张三')">提示信息1</button>
    <!-- 监听按钮的点击事件，同时为其绑定事件处理函数 show1 -->
    <button @click="show2('李四')">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1(e, uname) {
          alert('你好！')
          console.log('提示信息1   ' + uname)
          console.log(e.target)
        },
        show2(e, uname) {
          alert('你好！！')
          console.log('提示信息2 e   '+ e)
          console.log('提示信息2 uname   '+ uname)
        },
      },
    })
  </script>
</body>
</html>

1.4 事件处理函数的this

事件处理函数如果写成普通函数，则事件处理函数的this指向vue实例对象；如果事件处理函数写成箭头，则事件处理函数的this指向windows对象，因为箭头函数没有自己的this。

<!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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <button v-on:click="show1()">提示信息1</button>
    <button @click="show2()">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          console.log('普通函数形式的this：',this === vm)
        },
        show2: () => {
          console.log('箭头函数形式的this：',this)
        },
      },
    })
  </script>
</body>
</html>

1.5 事件处理函数存放位置

事件处理函数定义后，最终会挂载到vue实例对象上。

事件处理函数不进行数据代理，只有写在data节点上的才会进行数据代理。

<!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>Document</title>
</head>
<body>
  <div id="root">
    <h1>Hello {{name}}!</h1>
    <button v-on:click="show1()">提示信息1</button>
    <button @click="show2()">提示信息2</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'zs'
      },
      methods: {
        show1() {
          console.log(vm)
        },
        show2: () => {
          console.log('箭头函数形式的this：',this)
        },
      },
    })
  </script>
</body>
</html>

2. 事件修饰符

在事件处理函数中调用preventDefault()(阻止默认行为)或 stopPropagation()(阻止冒泡)对事件的触发进行控制是非常常见的需求。

因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。

事件修饰符	说明
.prevent	阻止默认行为（例如:阻止a连接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡(事件的默认处理阶段为冒泡阶段)
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数
.passive	事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
      *{
        margin-top: 20px;
      }
      .demo1{
        height: 50px;
        background-color: skyblue;
      }
      .box1{
        padding: 5px;
        background-color: skyblue;
      }
      .box2{
        padding: 5px;
        background-color: orange;
      }
      .list{
        width: 200px;
        height: 200px;
        background-color: peru;
        overflow: auto;
      }
      li{
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- 阻止默认事件 -->
        <!-- a连接点击之后会进行页面的跳转，
          使用 .prevent 进行修饰后，
          点击之后不会进行页面的跳转-->
      <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
      <!-- 阻止事件冒泡 -->
        <!-- 
          事件捕获：
          点击按钮事件的传递方向为 div => button 由外向内
          事件冒泡：
          点击按钮向进行事件的捕获，
          随后进行事件的冒泡，事件的传递分向为 button => div 由内向外
          事件调用处理函数进行处理，默认是在事件冒泡阶段
          使用 .stop 修饰，可以阻止事件向外冒泡 -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
      </div>
      <!-- 事件只触发一次 -->
            <!-- 事件触发一次后，不再触发 -->
      <button @click.once="showInfo">点我提示信息</button>
      <!-- 使用事件的捕获模式 -->
          <!-- 使事件调用处理函数处理在事件的捕获阶段而不是冒泡阶段 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
          div2
        </div>
      </div>
      <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <!-- 
          由于事件默认情况下会出现冒泡，
          所以外层的事件依旧会触发，但是外层的触发元素不是外层元素本身
          而是内层元素
          .self 进行修饰可以使 只有event.target是当前操作的元素时才触发事件
         -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>
      <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- 
          事件默认情况下会等待回调函数 demo() 执行完成才会触发自己的默认行为
          如下代码，即函数执行完成才会进行滚动条的滚动
          .passive 可以使默认行为先执行，即滚动条立即滚动
         -->
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      },
      methods:{
        showInfo(e){
          alert('同学你好！')
        },
        showMsg(msg){
          console.log(msg)
        },
        demo(){
          for (let i = 0; i < 100000; i++) {
            console.log('#')
          }
          console.log('累坏了')
        }
      }
    })
  </script>
</html>

对事件需要进行多种修饰，可以在事件后面添加多个事件修饰符，即事件修饰符可以连写。

例如，既要阻止冒泡，又要阻止默认事件：

<div class="demo1" @click="showInfo">
  <a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>
</div>

3. 键盘事件

在监听键盘事件时，我们经常需要判断按键，根据按下的按键进行事件的处理。Vue为我们提供了一些常用的按键别名，此时，可以使用vue提供的别名为键盘相关的事件添加按键修饰符。

Vue中常用的按键别名：

按键	别名
回车	enter
删除	delete (捕获“删除”和“退格”键)
退出	esc
空格	space
换行	tab (特殊，必须配合keydown去使用)
上	up
下	down
左	left
右	right

tab键可以将光标从当前元素切走，tab配合keyup使用，即要等tab键抬起才会触发事件，但是当我们按下tab键光标就会从当前元素切走，无法触发事件的处理函数。tab配合keydown使用，在按下的时候会调用处理函数，同时光标从当前元素切走，所以tab 特殊，必须配合keydown去使用。

vue没有提供别名的按键，可以使用按键原始的key值进行绑定，但是对于那种按键由不同单词复合而成的需要进行转化，例如，大小写切换键CapsLock 转为caps-lock(短横线命名)。

获取按键名：e.key
获取按键编码：e.keyCode

其中，e为键盘事件

系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件

自定义按键别名：

Vue.config.keyCodes.自定义键名 = 键码

代码示例：

实现功能，按下enter键在控制台输出在文本框输入的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      },
      methods: {
        showInfo(e){
          console.log(e.target.value)
        }
      },
    })
  </script>
</html>

键盘事件可以连写。比如需要实现，按下ctrl+y键才在控制台输出在文本框输入的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el:'#root',
      data:{
        name:'尚硅谷'
      },
      methods: {
        showInfo(e){
          console.log(e.key)
          console.log(e.target.value)
        }
      },
    })
  </script>
</html>

[Vue]事件

前言

1. 事件处理

1.1 事件绑定指令

1.2 元素事件绑定代码示例

1.3 事件处理函数的参数

1.4 事件处理函数的this

1.5 事件处理函数存放位置

2. 事件修饰符

3. 键盘事件

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

[Vue]事件

前言

1. 事件处理

1.1 事件绑定指令

1.2 元素事件绑定代码示例

1.3 事件处理函数的参数

1.4 事件处理函数的this

1.5 事件处理函数存放位置

2. 事件修饰符

3. 键盘事件

热门文章

最新文章

相关课程

相关电子书