前言：
现时小伙伴们对“css鼠标事件”大致比较看重，你们都想要知道一些“css鼠标事件”的相关知识。那么小编同时在网络上收集了一些关于“css鼠标事件””的相关文章，希望我们能喜欢，兄弟们快快来了解一下吧！v-on的作用是为元素绑定监听事件
标准写法是：v-on:事件名="函数名"，
也可以简写成：@事件名='函数名'。
v-on绑定的事件触发后，methods对应的函数将触发。
不仅可以绑定鼠标事件，也可以绑定键盘事件
获取按键的内容
v-on:事件名后可以跟修饰符
常用的修饰符有
1、once：仅执行1次。
2、prevent：禁止默认行为
3、stop：在嵌套过程中，当多个元素响应同一个事件，防止发生冒泡。
4、self：避免自身受其他元素事件影响。
5、capture：添加事件侦听器。
举2个例子：
once
prevent
以上示例源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue前端入门，第11节 鼠标事件与键盘事件，事件修饰符的使用</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script></head><body><div id="app"> <p>{{text}}</p> <p><input type="button" value="单击事件：v-on:click" v-on:click="btnClick"></p> <p><input type="button" value="单击事件：@click" @click="btnClick"></p> <p><input type="button" value="双击事件：v-on:dblclick" v-on:dblclick="dblclick"></p> <p><input type="button" value="双击事件：@dblclick" @dblclick="dblclick"></p> <p><input type="button" value="鼠标移入：@mouseenter" v-on:mouseenter="mouseenter"></p> <p><input type="button" value="鼠标移出：@mousemove" v-on:mousemove="mousemove"></p> <p>按键抬起：@keyup<input type="text" v-on:keyup="keyup"></p> <p>按键按下：@keypress<input type="text" v-on:keypress="keyup"></p> <p>输入内容后按下回车键后响应：@keydown.enter<input type="text" v-on:keydown.enter="keyup"></p> <p><input type="button" value="单击事件,仅响应一次：v-on:click" v-on:click.once="btnClickonce"></p> <p><a :href="link" v-on:click.prevent="click_prevent">链接</a></p></div><script> Vue.config.productionTip = false new Vue({ el: "#app", data: { "text": "Vue前端入门，第9节 v-text的简单学习", "link": ";, "content": `<a href=";>Vue前端入门，第9节 v-text的简单学习</a>` }, methods: { btnClick: function () { this.text = "单击事件" }, dblclick: function () { this.text = "双击事件" }, mouseenter: function () { this.text = "鼠标进入" }, mousemove: function () { this.text = "鼠标移出" }, keyup: function (e) { console.log(e.keyCode) //获取键盘码 console.log(e.key) //获取按键 console.log(e.target.value)//获取对应的value的值 }, btnClickonce: function (e) { console.log(e.target.value)//获取对应的value的值 }, click_prevent: function (e) { console.log("click_prevent")//获取对应的value的值 }, } })</script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css鼠标事件 #js键盘事件怎么用 #html鼠标事件监听
