《Vue零基础入门教程》第十一课:事件绑定指令

往期内容

《Vue零基础入门教程》第一课:Vue简介

《Vue零基础入门教程》第二课:搭建开发环境

《Vue零基础入门教程》第三课:起步案例

《Vue零基础入门教程》第四课:应用实例

《Vue零基础入门教程》第五课:挂载

《Vue零基础入门教程》第六课:基本选项

《Vue零基础入门教程》第八课:模板语法

《Vue零基础入门教程》第九课:插值语法细节

《Vue零基础入门教程》第十课:属性绑定指令

1) 什么是事件绑定

将JS事件和对应的处理函数绑定

2) 语法

html 复制代码
v-on:事件名="函数名"
// 简写
@事件名="函数名"

示例

给一个按钮绑定点击事件

template部分

html 复制代码
<button @click="handleClick">点击</button>

js部分

javascript 复制代码
methods: {
  handleClick() {
    alert('hello')
  }
}
  • methods中定义的函数会挂载到vm实例对象上
  • methods中定义的普通函数内部this指向vm
  • methods中, 不推荐使用箭头函数

3) 是否加括号

  • 不加括号(70%): 直接写函数名称, 可以在回调函数中, 直接拿到事件对象event
  • 加括号(20%): 加括号主要为了传参, 在回调函数中, 拿到参数
  • 加括号(10%): 有时, 除了拿到参数外, 还需要原生的事件对象, 通过$event传递

示例

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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 访问vm实例上的属性 -->

      <!-- 70%: 在指令表达式中不加(). 就可以通过默认参数获取事件对象 -->
      <button @click="handleClick">点击了{{count}}次</button>

      <!-- 20%: 加() 目的是为了传参数 -->
      <button @click="handleClick(100)">点击了{{count}}次</button>

      <!-- 10%: 加() 在参数的最后, 通过$event也可以将事件对象传递 -->
      <button @click="handleClick(100, $event)">点击了{{count}}次</button>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            count: 0,
          }
        },
        methods: {
          // 在methods中定义的就是事件回调函数, 默认情况可以接收事件对象 做为参数
          handleClick(a, b) {
            console.log(a, b)
            // 事件回调. 当点击事件触发, 会被调用
            this.count++
          },
        },
      }).mount('#app')

      // const div = document.querySelector('#app')
      // div.addEventListener('click', function (e) {
      //   console.log(e)
      // })
    </script>
  </body>
</html>

4) 事件修饰符

在绑定事件的时候, 可以添加事件修饰符, 常用的事件修饰符如下:

●.prevent: 阻止默认行为

●.stop: 阻止冒泡

●.once: 事件只会触发一次

示例

prevent示例

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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <a @click.prevent="" href="http://www.baidu.com">baidu</a>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({}).mount('#app')

      // 原生js方式
      // document.querySelector('a').addEventListener('click', function (e) {
      //   // 调用事件对象的preventDefault方法, 阻止默认行为
      //   // 对于a元素而言, 默认行为就是跳转页面
      //   e.preventDefault()
      // })
    </script>
  </body>
</html>

stop示例

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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul @click="handleUl">
        <!-- 
          1. `.stop` 阻止事件向上冒泡
          2. 事件修饰符可以连用
         -->
        <li @click.stop="handleLi">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        methods: {
          handleUl() {
            console.log('ul被点击了...')
          },
          handleLi() {
            console.log('li被点击了...')
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

5) 按键修饰符

主要针对 键盘事件

常用按键修饰符

  • .enter: 回车键
  • .up: 上
  • .down: 下
  • .left: 左
  • .right: 右

系统功能键

  • .ctrl
  • .alt
  • .shift

示例

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>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" @keyup.enter="submit" />
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        methods: {
          submit() {
            console.log('输入了数据, 按下回车键')
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

指令语法的完整示意图:

https://cn.vuejs.org/guide/essentials/template-syntax#directives

相关推荐
zhangxingchao16 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo16 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er22 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年25 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er29 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing30 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客34 分钟前
gin如何返回html
前端·html·gin
islandzzzz41 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端43 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http