首页 > 其他分享> 文章详细

VUE学习个人纪录04

2022-07-29 17:00:32 阅读：159 来源： 互联网

标签：触发 VUE methods 04 纪录 showInfo 事件 click name

事件代理

事件的基本使用

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE学习个人纪录04

事件代理

事件的基本使用

事件修饰符