其他分享
首页 > 其他分享> > VUE学习个人纪录04

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:阻止事件冒泡(常用):

   e.stopPropagation() 

   <button @click.stop="showInfo"> 

3.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