VUE学习个人纪录04
作者:互联网
事件代理
事件的基本使用
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($event)”效果一致,但后者可以传参;
1 <body> 2 <div class="root"> 3 <h3>hello,{{name}}</h3> 4 <button @click="showInfo">点击提示</button> 5 6 </div> 7 <script type="text/javascript"> 8 Vue.config.productionTip = false 9 new Vue({ 10 el: '.root', 11 data: { 12 name: 'input your name ', 13 }, 14 methods: { 15 showInfo(event) { 16 alert('hello') 17 } 18 } 19 20 }) 21 </script> 22 </body>
事件修饰符
1.prevent:阻止默认事件(常用);
阻止事件发生的两种方法:
1 methods: { 2 showInfo(e) { 3 e.preventDefault() 4 } 5 }
或
1 @click.prevent="showInfo"
2.stop:阻止事件冒泡(常用):
- 在methods内加以下命令
e.stopPropagation()
- 在属性后加.stop(以下均以按钮的点击事件为例)
<button @click.stop="showInfo">
3.once:事件只触发一次(常用):
- 在属性后加.once
<button @click.once="showInfo">点击提示信息</button>
4.capture:使用事件的捕获模式:
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
此外:scroll 是 页面滚动条 滚动会触发的事件,而 wheel 是 鼠标滚轮滚 动触发的事件。
滚动条到底 ,滑动鼠标滚轮继续滚动,wheel就会一直触发,而scroll不会触发。
标签:触发,VUE,methods,04,纪录,showInfo,事件,click,name 来源: https://www.cnblogs.com/RIKILen/p/16518066.html