ftp上传网站全教程,建设部网站中淼工程有限公司,网站建设方案书微商城,凡客诚品品牌授权按键修饰符#xff1a;主要用于监听键盘上的按钮被按下时#xff0c;可触发对应的事件函数 v-on:keyup.修饰符.修饰符】、 .enter .tab .delete(针对delete和backspace两个按键) .esc .space .esc .space .up .down .left .right 系统修饰符必须按下才触发 .ctrl .alt .shift…按键修饰符主要用于监听键盘上的按钮被按下时可触发对应的事件函数 v-on:keyup.修饰符.修饰符】、 .enter .tab .delete(针对delete和backspace两个按键) .esc .space .esc .space .up .down .left .right 系统修饰符必须按下才触发 .ctrl .alt .shift .meta:mac针对的是command键盘windows针对的windows键盘田 例子代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-on事件处理指令/title
/head
body!--v-on 给元素标签绑定事件监听器oninput、onclick、onchange、onblur等完整方式v-on:事件名“函数/方法”简写方式事件名“函数/方法”注意符号不能加冒号“”input /click/change/blur .....--div idapp!--事件处理方式say未传递参数则默认会传递DOM原生事件对象--button v-on:clicksayv-on绑定的时间按钮{{msg}}/button!--事件的处理方法say传递了参数则默认不会传递DOM原生事件对象--button clicksay(123)简写绑定的事件按钮{{msg}}/button!--事件的处理方法传递了多个参数如果需要获取远程DOM事件对象则必须手动传$event--button clickdoLog(牛逼,$event)手动传递DOM事件对象/buttoninput blurdoBlur!--事件修饰符.stop 阻止单机事件继续传播 event.stopProgagetion()div clicktododiv clickdoThis/div/div.prevent 阻止事件默认行为a href** click.prevent**/a.once 事件只会触发一次button click.onceadd新增1/button--h3事件修饰符/h3div clicktododiv click.stopdoThis单机事件会继续传递/div/divbr!--默认情况下会触发点击事件且会进行页面跳转--a hrefhttp://www.baidu.com clickdoStop默认跳转/abr!--.prevent 阻止事件默认行为--a hrefhttp://www.baidu.com click.preventdoStop.prevent修饰符-跳转/abrbutton clickdoOnly1点击事件每次加一{{num1}}/buttonbrbutton click.oncedoOnly.once修饰符点击事件只触发一次{{num}}/button!--按键修饰符主要用于监听键盘上的按钮被按下时可触发对应的事件函数v-on:keyup.修饰符.修饰符】、.enter.tab.delete(针对delete和backspace两个按键).esc.space.esc.space.up.down.left.right系统修饰符必须按下才触发.ctrl.alt.shift.meta:mac针对的是command键盘windows针对的windows键盘田 --h3按键修饰符/h3input v-on:keyup.enterkeyEnter placeholder监听回车enter事件input v-on:keyup.deletekeyDelete placeholder监听删除针对delete和backspace两个按键!--Alt center--input keyup.alt.enteraltEnter placeholder监听Alt centerdiv click.ctrlclickCtrlCtrl点击事件/divinput keyup.meta.deletemdt placeholder监听田 delete或backspace两个按键input keyup.ctrl.shift.xctrlShiftx placeholderctrlShiftx/divscript src./node_modules/vue/dist/vue.global.js/scriptscript typetext/javascriptconst {createApp} Vue;const appcreateApp({data(){return{msg:aaa,num:0,num1:0}},//定义方法的选项methods: {say(event){//event 事件对象this.msg5555; //this 代表app对象console.log(say something!,event);},//多个必须加逗号doLog(name,event){console.log(name,event);},doBlur(event){console.log(输入框失去焦点,event.target.value); //获取输入框值},doThis(event){console.log(doThis);},todo(event){console.log(todo);},doStop(){alert(doStop!);},doOnly1(){this.num1;console.log(doOnly1);},doOnly(){this.num;console.log(doOnly);},keyEnter(){console.log(监听enter按键);},keyDelete(event){console.log(监听delete和backspace两个按键按键,event.keyCode);},altEnter(event){console.log(监听alt和Enter两个组合按键,event.keyCode);},clickCtrl(){console.log(监听clickCtrl,event.keyCode);},mdt(){console.log(监听田 delete或backspace两个按键,event.keyCode);},ctrlShiftx(){console.log(ctrlShiftx,event.keyCode);}}}).mount(#app);console.log(app,app);/script/body
/html
