Vue.js实例学习:事件处理

本文详细介绍了Vue.js中的事件处理,包括监听事件、事件处理方法,如无参数方法和有参数方法,并探讨了事件修饰符的用法,如.stop、.prevent等,以及按键修饰符和系统修饰键的应用,帮助开发者更好地理解和使用Vue.js进行事件操作。
摘要由CSDN通过智能技术生成

一、监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。( v-on: 简写为@)

<div id="app">
  <button @click = "count++">加 1</button>
  <button @click = "count--">减 1</button>
  <p>{
  {count}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    count:0
  }
});
</script>

输出:初始值为0
这里写图片描述
点击"加1"就增加1,同理点击"减1"就减少1
这里写图片描述


二、事件处理方法

许多事件处理逻辑会很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

1、调用无参数方法

顺便补一下js的event:

  1. 将even(事件)作为参数,就是这个“点击”事件,通过这个even,可以获取到event.target,就是点击的对象等等属性。PS:那个even参数可加可不加,需要用到的时候就加。
  2. event也就是事件的意思,就相当于把这个事件的对象传给这个方法,event包含了这个事件的所有参数和信息
<div id="app">
  <button @click = "greet">button</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    greet:function(event){//因为上面没有给该函数传递参数,所以给他个参数时,系统默认为event,可以随便起名字(阿毛,阿狗) 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值