介绍
这篇文章主要介绍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事件处理的案例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!