位置: IT常识 - 正文
Vue的事件处理，点击事件(vue中事件)
编辑：rootadminVue的事件处理，点击事件
本文链接地址:https://www.jiuchutong.com/zhishi/298355.html
转载请保留说明！
目录
1、 v-on:click 绑定属性示例：
2、 v-on:click 绑定方法示例：
3、 v-on:click 绑定特殊变量示例：
4、事件处理的修饰符
按键修饰符：
v-model表单修饰符：
v-bind指令修饰符：
推荐整理分享Vue的事件处理，点击事件(vue中事件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue事件处理机制,vue的事件处理器,vue事件bus,vue事件bus,vue事件bus,vue中事件,vue事件处理机制,vue事件处理机制,内容如对您有帮助，希望把文章链接给更多的朋友！
监听DOM事件使用的是v-on指令，该指令通常在模板中直接使用，在触发事件时会触发执行一些JavaScript代码。Vue.js提供了v-on指令的简写形式“@”，可用“@”来代替，如v-on:click可用简写成@click
1、 v-on:click 绑定属性示例：<div id="element"> <button @click="count++">点击</button> <p>{{count}}</p></div><script src="http://60.205.187.0/vue/vue.js"></script><script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count:0 } })</script>2、 v-on:click 绑定方法示例：<div id="element"> <button @click="show">点击</button></div><script src="http://60.205.187.0/vue/vue.js"></script><script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count:0 }, methods:{ show:function(){ alert("点击调用") } } })</script>3、 v-on:click 绑定特殊变量示例：除了绑定到一个方法之外，v-on也支持内联JavaScript语句，但只可以使用一个语句，如果在内联语句中需要获取原生的DOM事件对象，可以将一个特殊变量$event传入方法之中
<div id="element"> <button @click="show('我被点击了',$event)">点击</button></div><script src="http://60.205.187.0/vue/vue.js"></script><script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count:0 }, methods:{ show:function(message,e){ e.preventDefault();//组织浏览器默认行为 alert(message) } } })</script>4、事件处理的修饰符 .stop阻止事件冒泡，等同于调用event.stopPropagation.capture捕获冒泡，使用capture模式添加事件监听器.once只触发一次回调，加上once之后prevent失效.prevent阻止标签的默认行为，等于调用event.preventDefault().passive不阻止事件的默认行为.self将事件绑定到自身，只有自身才能触发<!--阻止单击事件继续传播--><a v-on:click.stop="doSomething"></a><!-- 默认情况下，点击子div会默认触发冒泡，打印的结果为2，1；这里给父div添加了capture修饰符，则会转为捕获阶段，则点击子div时，会从最外层向点击的目标元素一层一层触发相同的事件，则结果为1，2； --><div @click.capture="showMsg(1)"> <div @click="showMsg(2)"> </div></div> <!-- showMsg(msg) { console.log(msg); } --><!--只触发一次，后续不会触发--><button v-on:click.once="doSomething"></button><!--阻止默认事件--><a href="#" v-on:click.prevent="doSomething"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 `onScroll` 完成 --><div v-on:scroll.passive="onScroll"></div><!--阻止表单默认提交事件--><form v-on:submit.prevent="onSubmit"></form><!--只有当事件是从当前元素本身触发时才会调用处理函数--><div v-on:click.self="doSomething"></div><!--修饰符串联，阻止表单默认提交事件且阻止冒泡--><a v-on:click.stop.prevent="doSomething"></a><!--只有修饰符，而不绑定事件--><form v-on:submit.prevent></form> 按键修饰符：按键keyCode别名Enter13enterBackspace8deleteEsc27escLeft Arrow(←)37leftUp Arrow(↑)38upRight Arrow(→)39rightDown Arrow(↓)40downTab9tabDelete46deleteSpacebar32spaceShift16shiftCtrl17ctrlAlt18alt<!--使用keycode--><input v-on:keyup.13="xxx"><!--使用别名--><input v-on:keyup.enter="xxx"> v-model表单修饰符：lazy光标离开标签的时候，将值赋予给value，进行数据同步trim自动过滤用户输入的首空格字符，而中间的空格不会过滤number自动将用户输入转换为数值类型，如果转换结果为NaN，则返回覆盖原始值
<div id="element"> <p>lazy示例,光标离开输入框时，值才会同步更新</p> <input v-model.lazy="message" placeholder="点击输入"> <p>当前输入：{{message}}</p> <p>number示例</p> <input v-model.number="message1" placeholder="点击输入"> <p>当前输入：{{message1}}</p> <p>trim示例</p> <input v-model.trim="message2" placeholder="点击输入"> <p>当前输入：{{message2}}</p> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: '#element', data: { message: '', message1:'', message2:'', } }) </script> v-bind指令修饰符：sync对props进行一个双向绑定prop设置自定义标签属性，避免暴露数据，防止污染HTML结构camel将命名变为驼峰法命名法，如将hello_world属性名转换为helloWorld上一篇：PyTorch 之 强大的 hub 模块和搭建神经网络进行气温预测(pytorch with no grad)
下一篇：vue3路由配置及路由跳转传参(vue如何配置路由)
