第一句子网 > 事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符

事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符

时间：2024-06-15 11:05:44

事件绑定

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div>{{num}}</div><div><button v-on:click='num++'>点击</button><button @click='num++'>点击1</button><button @click='handle'>点击2</button><button @click='handle()'>点击3</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0}, // 注意点：这里不要忘记加逗号 // methods 中主要是定义一些函数methods: {handle: function() {// 这里的this是Vue的实例对象console.log(this === vm) // true// 在函数中想要使用data里面的数据一定要加this this.num++;}}});</script></body></html>

事件函数传参

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div>{{num}}</div><div><button v-on:click='handle1'>点击1</button><button v-on:click='handle2(123, 456, $event)'>点击2</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});</script></body></html>

事件修饰符

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div>{{num}}</div><div v-on:click='handle0'><button v-on:click.stop='handle1'>点击1</button></div><div><a href="" v-on:click.prevent='handle2'>百度</a></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-事件修饰符*/var vm = new Vue({el: '#app',data: {num: 0},methods: {handle0: function(){this.num++;},handle1: function(event){// 阻止冒泡// event.stopPropagation();},handle2: function(event){// 阻止默认行为// event.preventDefault();}}});</script></body></html>

按键修饰符

Vue.config.keyCodes.f1 = 113

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><form action=""><div>用户名：<input type="text" v-on:keyup.delete='clearContent' v-model='uname'></div><div>密码：<input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'></div><div><input type="button" v-on:click='handleSubmit' value="提交"></div></form></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-按键修饰符*/Vue.config.keyCodes.f1 = 113var vm = new Vue({el: '#app',data: {uname: '',pwd: '',age: 0},methods: {clearContent:function(){// 按delete键的时候，清空用户名this.uname = '';},handleSubmit: function(){console.log(this.uname,this.pwd)}}});</script></body></html>

事件绑定-自定义按键修饰符规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><input type="text" v-on:keyup.aaa='handle' v-model='info'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.config.keyCodes.aaa = 65var vm = new Vue({el: '#app',data: {info: ''},methods: {handle: function(event){console.log(event.keyCode)}}});</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。