vue 学习 -- day05(事件处理)

  1. 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上;
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm了(会指向 window);
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
  5. @click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;

注意:方法不做数据代理(为了数据写到页面上去), 方法以后不改,等着被调用就可以了,所以没有必要做数据代理

方法不要写到 data 中,因为这样会让 vue 很累,放到data中方法会做数据代理,且给它做数据代理没有意义

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-seamless-scroll是一个基于Vue3的无缝滚动组件库,可以用于创建无限滚动、轮播等效果的滚动视图。如果您想监听vue3-seamless-scroll的滚动事件,可以通过以下步骤实现: 1. 在组件中引入vue3-seamless-scroll,并添加需要滚动的内容和相关配置: ```html <template> <div class="scroll"> <vue3-seamless-scroll :options="options"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </vue3-seamless-scroll> </div> </template> <script> import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default { components: { Vue3SeamlessScroll }, data() { return { list: ['item1', 'item2', 'item3'], options: { step: 1, limitMoveNum: 1, direction: 'horizontal' } } } } </script> ``` 2. 在组件中使用ref来获取vue3-seamless-scroll组件的实例,并在mounted生命周期中注册滚动事件监听器: ```html <template> <div class="scroll"> <vue3-seamless-scroll ref="scroll" :options="options"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </vue3-seamless-scroll> </div> </template> <script> import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default { components: { Vue3SeamlessScroll }, data() { return { list: ['item1', 'item2', 'item3'], options: { step: 1, limitMoveNum: 1, direction: 'horizontal' } } }, mounted() { const scroll = this.$refs.scroll.$refs.scroll scroll.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { console.log('scrolling...') } } } </script> ``` 在上述代码中,我们使用$refs来获取vue3-seamless-scroll组件的实例,并使用addEventListener方法在mounted生命周期中注册了滚动事件监听器handleScroll。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值