Vue框架学习笔记——事件处理

文章目录


前文提要

本人仅做个人学习记录,如有错误,请多包涵


事件处理的解析过程

我们能够为标签添加事件对应的响应,从而处理事件。

下面是为按钮提供鼠标点击时候的响应事件的处理函数。

样例代码如下:

html 复制代码
<body>
  <div id="box">
    <h2>哈哈,{{name}}</h2>
    <button v-on:click="showInfo">点我提示信息</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      data: {
        name: '这里是name的值',
      },
      methods: {
        showInfo() {
          console.log('你好')
        }
      }
    })
  </script>
</body>

效果展示图片:

v-on:click="响应函数"

首先是通过下列代码:

html 复制代码
<button v-on:click="showInfo">点我提示信息</button>

在标签中加入v-on:click指令,添加事件的处理,然后为其添加响应函数,字符串中的就是响应函数的名字。

v-on:click简写形式

v-on:click可以简写为@click

响应函数添加

需要在Vue实例中增加一个配置属性methods,如同下面代码一样。

mothods属性中,不用加上function ,因为这里写的都是函数,所以不必加上function;可以写多个函数,不是只能写一个,但是需要注意不要写成箭头函数,箭头函数中没有this,this指向的就是全局的window。

js 复制代码
const vm = new Vue({
  el: '#box',
  data: {
    name: '这里是name的值',
  },
  methods: {
    showInfo() {
      console.log('你好')
    }
  }
})

这里写的是showInfo(),其等价于showInfo(event)

其余代码不改,只修改showInfo中的代码,改为:

js 复制代码
showInfo() {
          console.log(event)
}

呈现效果如下:

默认会传一个当前事件的对象,通过event.target可以访问触发事件的元素

将上述代码中的部分改为这样即可:

js 复制代码
console.log(event.target)

呈现效果如下:

还可以通过event.target.value访问带有value属性的元素的value值。

响应函数传参

如果需要响应函数传参直接在函数的括号中直接修改即可,例如把button中的代码改为:

html 复制代码
<button v-on:click="showInfo(6)">点我提示信息</button>

methods中的函数改为:

js 复制代码
 showInfo(a) {
          console.log(a)
}

呈现效果如下:

这样做可以传递参数,但是会丢失之前默认传参中的event,这里就不做展示了。

可以修改上面的代码来让event不丢失,那就是使用占位符"$event"

占位符"$event"

html 复制代码
<button v-on:click="showInfo($event,6)">点我提示信息</button>

methods中的函数改为:

js 复制代码
 showInfo(e,a) {
          console.log(e,'~~~',a)
}

从这里能看见'~~~'前面输出了事件,后面跟着一个6,event也没有丢失,6也正常传递了。

使用$event会更加灵活,能够传递更多的采纳数

注意事项

methods后面是配置对象,理论上data后面也是配置对象,函数也可以写道data中去,但是不建议这么做。

之前的数据代理中提到,data中的数据都会经过数据代理再在Vue实例中创建一个新的属性,函数不需要做数据代理,也就没必要写在data中。

如果在data中写了函数,做了数据代理,只会占用更多的资源。

methods不会做数据代理。


至此,结束。

如果你觉得这篇文章写的不错,多多点赞~收藏吧!

相关推荐
摇滚侠2 小时前
Spring Boot 3零基础教程,IOC容器中组件的注册,笔记08
spring boot·笔记·后端
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
bnsarocket3 小时前
Verilog和FPGA的自学笔记2——点亮LED
笔记·fpga开发·verilog·自学
Larry_Yanan6 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
im_AMBER6 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰6 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木6 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience6 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
LuckySusu6 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu7 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js