阿里做的网站后台怎么进,响应式网站不加载图片,成都企业网站建设及公司ppt,珠宝类网站建设可执行报告目录 1. 事件处理基本使用2. 事件修饰符3. 键盘事件 1. 事件处理基本使用
使用v-on:xxx或xxx绑定事件#xff0c;其中xxx是事件名#xff0c;比如clickmethods中配置的函数#xff0c;都是被Vue所管理的函数#xff0c;this的指向是vm或组件实例对象
!DOCTYPE htmlxxx绑定事件其中xxx是事件名比如clickmethods中配置的函数都是被Vue所管理的函数this的指向是vm或组件实例对象
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javaScript src../js/vue.js/script
/head
bodydiv idrootbutton clickshowInfo1点我提示信息不传参/buttonbutton clickshowInfo2($event,66)点我提示信息传参/button
/divscript typetext/javascriptconst vm new Vue({el:#root,methods:{showInfo1(event){console.log(event.target.innerText) // 点我提示信息不传参// console.log(this) //此处的this是vmalert(同学你好)},showInfo2(event,number){console.log(number) // 66alert(同学你好)}}})
/script/body
/html2. 事件修饰符
注意: 多个事件修饰符可以连写如click.prevent.stop
prevent阻止默认事件常用。如点击a/标签不跳转stop阻止事件冒泡常用。如div里面有一个button都有click动作只触发button的动作而不进行冒泡触发div的动作once事件只触发一次常用。如点击按钮函数只在第一次点击时触发capture使用事件的捕获模式。如div里面有一个button都有click动作。正常是先捕获到div再捕获到button然后执行button的动作再执行div的动作。使用了capture会先执行div的动作再执行button的动作self只有event.target是当前操作的元素时才触发事件。如div里面有一个button都有click动作。正常点击button两个动作都会被触发现在点击button只触发button的动作。这个的效果和stop动作一样passive事件的默认行为立即执行无需等待事件回调执行完毕。如wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动再执行触发的函数否则执行顺序相反
使用示例如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javaScript src../js/vue.js/scriptstyle.div1{height: 50px;background-color: skyblue;}.ul1{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}/style
/head
bodydiv idrooth2prevent: /h2!-- 也可以通过调用: event.preventDefault()来实现 --a hrefhttp://www.baidu.com click.preventshowInfo点我不会跳转到百度/ah2stop: /h2div classdiv1 clickshowInfobutton click.stopshowInfo点我提示信息/button/divh2once: /h2button click.onceshowInfo点我提示信息/buttonh2capture: /h2div classdiv1 click.captureshowMsg(1)button clickshowMsg(2)我的消息后打印/button/divh2self: /h2div classdiv1 click.selfshowInfobutton clickshowInfo你点击的是按钮而不是div哦/button/div!-- scroll是右边的滚动条的滚动监听, 不需要使用passive滚动条先滚动再执行触发的函数 --!-- wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动再执行触发的函数否则执行顺序相反 --h2passive: /h2ul wheel.passivecal classul1li1/lili2/lili3/lili4/li/ul/divscript typetext/javascriptnew Vue({el:#root,methods:{showInfo(event){alert(同学你好)console.log(event.target)},showMsg(msg){console.log(msg)},cal(){for (let i 0; i 3000; i) {console.log(i)}console.log(累坏了)}}})
/script/body
/html页面显示效果如下
3. 键盘事件 keydown当键盘按下触发函数keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到 Vue中常用的按键别名 回车 enter删除 delete (捕获“删除”和“退格”键)退出 esc空格 space换行 tab (特殊必须配合keydown去使用)上 up下 down左 left右 right Vue未提供别名的按键可以使用按键原始的key值去绑定但多个单词的注意要转为短横线命名。如Entercaps-lock 可以使用Vue.config.keyCodes.huiche 13定义一个按键别名。但不推荐使用keyCode因为不同浏览器的一个按键keyCode不一样以后keyCode这种方式会被废弃 系统修饰键用法特殊ctrl、alt、shift、meta(windows图标) 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。如ctrl skey和keyCode是s和83但是ctrl的key和keyCode是Control和17。也可以指定按键如keyup.ctrl.yshowInfo配合keydown使用正常触发事件
使用示例如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javaScript src../js/vue.js/script
/head
bodydiv idrootinput typetext placeholder按下一个指定键让弹框显示值 keyup.entershowInfo
/divscript typetext/javascriptVue.config.keyCodes.huiche 13new Vue({el: #root,methods: {showInfo(event) {console.log(event.key, event.keyCode) // 获取按键的名称和codealert(event.target.value) // 获取输入框的值}}})
/script/body
/html
