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

VUE学习个人纪录04

2022-07-29 17:00:32 作者：互联网

事件代理

事件的基本使用

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（以下均以按钮的点击事件为例）

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