事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
生活随笔
收集整理的這篇文章主要介紹了
事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
事件綁定
<!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 中 主要是定義一些函數(shù)methods: {handle: function() {// 這里的this是Vue的實例對象console.log(this === vm) // true// 在函數(shù)中 想要使用data里面的數(shù)據(jù) 一定要加this this.num++;}}});</script> </body></html>?事件函數(shù)傳參
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title> </head><body><div id="app"><div>{{num}}</div><div><!-- 如果事件直接綁定函數(shù)名稱，那么默認(rèn)會傳遞事件對象作為事件函數(shù)的第一個參數(shù) --><button v-on:click='handle1'>點擊1</button><!-- 2、如果事件綁定函數(shù)調(diào)用，那么事件對象必須作為最后一個參數(shù)顯示傳遞，并且事件對象的名稱必須是$event --><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="http://www.baidu.com" 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){// 阻止默認(rèn)行為// 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>事件綁定-自定義按鍵修飾符 規(guī)則：自定義按鍵修飾符名字是自定義的，但是對應(yīng)的值必須是按鍵對應(yīng)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>總結(jié)
以上是生活随笔為你收集整理的事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 指令—— 数据绑定指令||数据响应式||
- 下一篇： 1、spring的概述