欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法

 更新時間：2019年04月22日 09:51:03   作者：JS菌  
這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽事件，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

文章舉例說明一下在 vue 中如何更好的監(jiān)聽瀏覽器事件。原文介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽事件。這樣代碼書寫較為簡練，容易管理。

當(dāng)監(jiān)聽如下事件的傳統(tǒng)做法是：

  • window.scrollX
  • window.scrollY
  • window.innerHeight
  • window.innerWidth

通常需要書寫很多代碼：

created () {
 this.$el.addEventListener('click', this.someMethod)
},
destroyed () {
 this.$el.removeEventListener('click', () => this.someMethod)
}

更好的方式是使用新的 Vue 實(shí)例

import Vue from 'vue'
const WindowInstanceMap = new Vue({
 data() {
  return {
   scrollY: 0
  }
 },
 created() {
  window.addEventListener('scroll', e => {
   this.scrollY = window.scrollY
  })
 },
})
export default WindowInstanceMap

然后在項(xiàng)目中使用：

// AppNav.vue
import WindowInstanceMap from './WindowInstanceMap.js'
export default {
 computed: {
  scrollY () { return WindowInstanceMap.scrollY },
  isCollapsed () {
   return this.scrollY < 100
  }
 }
}

這樣做的好處是：

  • 不會大量占用 dev-tool 的版面顯示變動信息
  • 減少主要項(xiàng)目的代碼
  • 因?yàn)?dev-tool 不支持多實(shí)例的調(diào)試，因此需要對這部分代碼保持簡單

最后看看效果：

總結(jié)

以上所述是小編給大家介紹的使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

相關(guān)文章

  • 淺談vue-props的default寫不寫有什么區(qū)別

    淺談vue-props的default寫不寫有什么區(qū)別

    這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue項(xiàng)目中如何調(diào)用多個不同的ip接口

    vue項(xiàng)目中如何調(diào)用多個不同的ip接口

    這篇文章主要介紹了vue項(xiàng)目中如何調(diào)用多個不同的ip接口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue數(shù)組雙向綁定問題及$set用法說明

    vue數(shù)組雙向綁定問題及$set用法說明

    這篇文章主要介紹了vue數(shù)組雙向綁定問題及$set用法說明，具有很好的參考價值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解

    Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解

    這篇文章主要介紹了Vue3.0 自己實(shí)現(xiàn)放大鏡效果案例講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-07-07
  • vue請求函數(shù)和路由的安裝使用過程

    vue請求函數(shù)和路由的安裝使用過程

    這篇文章主要介紹了vue請求函數(shù)和路由的安裝使用過程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • vue pdf二次封裝解決無法顯示中文問題方法詳解

    vue pdf二次封裝解決無法顯示中文問題方法詳解

    這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • Vue3使用icon的兩種方式實(shí)例

    Vue3使用icon的兩種方式實(shí)例

    vue開發(fā)網(wǎng)站的時候,往往圖標(biāo)是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-11-11
  • Vue封裝一個簡單輕量的上傳文件組件的示例

    Vue封裝一個簡單輕量的上傳文件組件的示例

    這篇文章主要介紹了Vue封裝一個簡單輕量的上傳文件組件的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • Vue切換Tab動態(tài)渲染組件的操作

    Vue切換Tab動態(tài)渲染組件的操作

    這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue-resource攔截器設(shè)置頭信息的實(shí)例

    vue-resource攔截器設(shè)置頭信息的實(shí)例

    下面小編就為大家?guī)硪黄獀ue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10

最新評論