Vue.JS事件处理的案例

  介绍

这篇文章主要介绍Vue。JS事件处理的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

Vuejs向我们提供了一个名为v <代码>:上的指令,它可以帮助我们注册和侦听dom <代码> 事件,这样无论何时触发事件,都会调用传递给该事件的方法。

<代码> <强> v:在 <强>指令的语法

& lt; !——v:: eventname=癿ethodname"——比;      v: & lt;按钮:点击=癶andleClick"祝辞Click

在上面的代码中,我们监听按钮上的<代码>点击事件,以便每当用户单击按钮时,它都会调用<代码> handleClick 方法。

& lt; template>   & lt; div>   & lt; h2> {{num}} & lt;/h2>   v & lt;按钮:点击=癷ncrement"祝辞Increment   & lt;/div>   & lt;/template>      & lt; script>   出口默认{   数据:函数(){   返回{   num: 0   }   },   方法:{   增量:函数(){   this.num=this.num + 1   }   }   }   & lt;/script>

<>强如何将参数传递给事件处理程序吗?

有时事件处理程序方法也可以接受参数。

& lt; template>   & lt; div>   & lt; h2> {{num}} & lt;/h2>   & lt; !——参数10被传递给增量方法——比;   v & lt;按钮:点击=霸隽?10)“在增加10 & lt;/button>   & lt;/div>   & lt;/template>      & lt; script>   出口默认{   数据:函数(){   返回{   num: 0   }   },   方法:{//参数“价值”   增量:功能(价值){   这一点。num=this.num +价值   }   }   }   & lt;/script>

这里,我们创建了一个只有一个参数值的<代码> 方增量法,以便将参数传递给<代码>增量(10)方法。

<>强如何访问默认事件对象吗?

要访问方法vuejs中的默认事件对象,需要提供一个名为事件的美元变量。

& lt; template>   & lt; !美元,我们正在传递一个事件变量——比;   & lt;输入占位符=皀ame"v: onchange=癶andleChange(事件),/比;   & lt;/template>      & lt; script>   出口默认{   方法:{   handleChange:函数(事件){   console.log (event.target.value美元)   }   }   }   & lt;/script>

在这里,我们通过使用Vuejs提供的特殊美元事件变量来访问事件对象。

有时我们需要同时访问事件对象和参数。

& lt; template>   & lt; !——我们传递参数加上美元事件变量——比;   v & lt;按钮:点击=癶itMe(& # 39;吸引我# 39;,事件美元)“比;   严重打击了我   & lt;/button>   & lt;/template>      & lt; script>   出口默认{   方法:{   handleChange:函数(消息,事件美元){   $ event.preventDefault ()   console.log(消息)   }   }   }   & lt;/script>

<强>简写语法

vuejs还提供了一种简写语法来侦听dom <代码> 事件。

& lt; !——简写语法@eventname=癿ethod"——比;   & lt;按钮@click=癶andleClick"祝辞& lt;/button>      & lt; !——长语法——比;   v & lt;按钮:点击=癶andleClick"祝辞& lt;/button>

以上是“Vue.JS事件处理的案例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

Vue.JS事件处理的案例