鹿班设计网站官网,wordpress 文档 插件,三明建设局网站,seo企业网站模板一、基本使用
1.使用v-on:xxx 或 xxx 绑定事件#xff0c;其中xxx是事件名#xff1b;2.事件的回调需要配置在methods对象中#xff0c;最终会在vm上#xff1b;3.methods中配置的函数#xff0c;不要用箭头函数#xff01;否则this就不是vm了#xff1b;4.methods中配…一、基本使用
1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名2.事件的回调需要配置在methods对象中最终会在vm上3.methods中配置的函数不要用箭头函数否则this就不是vm了4.methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象5.clickdemo 和 clickdemo($event) 效果一致但后者可以传参
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title数据绑定/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 准备好一个容器 --div idrooth1欢迎来到{{name}}学习/h1button v-on:clickshowInfo1点我弹出提示信息1/button!--符号可以代替v-on:--button clickshowInfo2(66,$event)点我弹出提示信息2/button /div
/body
script typetext/javascriptconst vm new Vue({el:#root,data:{name:菜鸟教程},methods:{showInfo1(event){alert(同学你好啊)},showInfo2(number,event){alert(同学你好啊!!)}}})/script
/html
二、事件修饰符
Vue中的事件修饰符
1.prevent阻止默认事件常用
2.stop阻止事件冒泡常用
3.once事件只触发一次常用
4.capture使用事件的捕获模式
5.self只有event.target是当前操作的元素时才触发事件 6.passive事件的默认行为立即执行无需等待事件回调执行完毕
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件修饰符/title!-- 引入Vue --script typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}/style/headbody!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- 阻止默认事件常用 --a hrefhttp://www.atguigu.com click.preventshowInfo点我提示信息/a!-- 阻止事件冒泡常用 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button!-- 修饰符可以连续写 --!-- a hrefhttp://www.atguigu.com click.prevent.stopshowInfo点我提示信息/a --/div!-- 事件只触发一次常用 --button click.onceshowInfo点我提示信息/button!-- 使用事件的捕获模式 --div classbox1 click.captureshowMsg(1)div1div classbox2 clickshowMsg(2)div2/div/div!-- 只有event.target是当前操作的元素时才触发事件 --div classdemo1 click.selfshowInfobutton clickshowInfo点我提示信息/button/div!-- 事件的默认行为立即执行无需等待事件回调执行完毕 --ul wheel.passivedemo classlistli1/lili2/lili3/lili4/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)// console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}}})/script
/html
三、 键盘事件
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title键盘事件/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 1.Vue中常用的按键别名回车 enter删除 delete (捕获“删除”和“退格”键)退出 esc空格 space换行 tab (特殊必须配合keydown去使用)上 up下 down左 left右 right2.Vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名3.系统修饰键用法特殊ctrl、alt、shift、meta(1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。(2).配合keydown使用正常触发事件。4.也可以使用keyCode去指定具体的按键不推荐5.Vue.config.keyCodes.自定义键名 键码可以去定制按键别名--!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keydown.huicheshowInfo/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche 13 //定义了一个别名按键new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},})/script
/html
