位置: IT常识 - 正文

Vue的事件处理，点击事件(vue中事件)

发布时间：2024-01-17

Vue的事件处理，点击事件

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 @click.capture="showMsg(1)"> <div @click="showMsg(2)"> </div></div> <button v-on:click.once="doSomething"></button><a href="#" v-on:click.prevent="doSomething"></a><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<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