Vue.js------------------4vue事件
Posted 浅忆尘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js------------------4vue事件相关的知识，希望对你有一定的参考价值。
vue事件
一：事件简介
之前都是@click=function，出发单击事件
而@clisck="funciton($event)"可以获得js的原生事件，因为有的时候并不是事件在哪里出发就在哪里处理，那样会很笨
例如扫雷，一个大的div里面包含100个div，难道每个小div都要写一个单击事件？
此时应该把事件绑定在外面的大div上，当内部div的事件冒泡到大的div，既然统一进行处理，你要知道这个事件来自于哪里
但是还有一个问题，冒泡到你处理的位置，还会继续冒泡么？是的，就算处理了还是会继续冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./bower_components/vue/dist/vue.min.js"></script> </head> <body> <!-- 冒泡中 --> <!-- <div id="app"> <div @click="func($event)"> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> </div> </div> --> <!-- 只要不设置停止，就会一直向上冒 加上.stop才会停止 --> <div id="app"> <div @click="func2"> <!-- <div @click="func($event)"> --> <div @click.stop="func($event)"> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> </div> </div> <!-- 阻止标签的默认行为 --> <a href="www.baidu.com" @click.prevent="func3">百度</a> </div> <script> var m = { }; var vm = new Vue({ el: "#app", data: m, methods: { func: function(event){ console.log(event,event.target); console.log("冒泡中"); }, func2: function(event){ console.log("冒泡中2。。"); }, func3: function(){ alert("阻止跳转"); } } }); </script> </body> </html>
事件加下面的配合的更精准
.prevent 阻止默认的行文
.enter 按enter触发此事件
.left 下面这三个是鼠标的左右键或者中键触发事件
.right
.middle
.once 仅触发一次，就不再触发
.ctrl
.shift
.alt
以上是关于Vue.js------------------4vue事件的主要内容，如果未能解决你的问题，请参考以下文章