成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js 自定義指令使用場景及案例

chanjarster / 3204人閱讀

摘要：使用場景代碼復(fù)用和抽象的主要形式是組件當(dāng)需要對普通元素進(jìn)行底層操作，此時(shí)就會用到自定義指令但是，對于大幅度的變動，還是應(yīng)該使用組件鉤子函數(shù)詳情查閱文檔示例輸入框自動聚焦注冊一個(gè)全局自定義指令當(dāng)被綁定的元素插入到中時(shí)聚焦元素下拉菜單點(diǎn)擊

1. 使用場景

代碼復(fù)用和抽象的主要形式是組件

當(dāng)需要對普通 DOM 元素進(jìn)行底層操作，此時(shí)就會用到自定義指令

但是，對于大幅度的 DOM 變動，還是應(yīng)該使用組件

2. 鉤子函數(shù)

詳情查閱文檔 https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0

3. 示例 3.1 輸入框自動聚焦 
// 注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive("focus", {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
3.2 下拉菜單

點(diǎn)擊下拉菜單本身不會隱藏菜單

點(diǎn)擊下拉菜單以外的區(qū)域隱藏菜單

Vue.directive("clickoutside", {
  bind(el, binding) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
       return false 
      }
      
      if (binding.expression) {
        binding.value(e)
      }
    }
    
    el.__vueMenuHandler__ = documentHandler
    document.addEventListener("click", el.__vueMenuHandler__)
  },
  unbind(el) {
    document.removeEventListener("click", el.__vueMenuHandler__)
    delete el.__vueMenuHandler__
  }
})

new Vue({
  el: "#app",
  data: {
    show: false
  },
  methods: {
    handleHide() {
      this.show = false
    }
  }
})
3.3 相對時(shí)間轉(zhuǎn)換

類似微博、朋友圈發(fā)布動態(tài)后的相對時(shí)間，比如剛剛、兩分鐘前等等

new Vue({
  el: "#app",
  data: {
    time: 1565753400000
  }
})

Vue.directive("relativeTime", {
  bind(el, binding) {
    // Time.getFormatTime() 方法，自行補(bǔ)充
    el.innerHTML = Time.getFormatTime(binding.value)
    el.__timeout__ = setInterval(() => {
      el.innerHTML = Time.getFormatTime(binding.value)
    }, 6000)
  },
  unbind(el) {
    clearInterval(el.innerHTML)
    delete el.__timeout__
  }
})
3.4 滾動動畫 

  
Scroll me

  

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.

  


Vue.directive("scroll", {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener("scroll", f)
      }
    }
    window.addEventListener("scroll", f)
  }
})

// main app
new Vue({
  el: "#app",
  methods: {
   handleScroll: function(evt, el) {
    if (window.scrollY > 50) {
      TweenMax.to(el, 1.5, {
        y: -10,
        opacity: 1,
        ease: Sine.easeOut
      })
    }
    return window.scrollY > 100
    }
  }
})
body {
  font-family: "Abhaya Libre", Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: 800;
}

.centered {
  margin: 0 auto;
  display: table;
  font-size: 60px;
  margin-top: 100px;
}

.box {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 20px;
  line-height: 1.3em;
  opacity: 0;
  color: white;
  width: 200px;
  margin: 0 auto;
  margin-top: 30px;
  transform: translateZ(0);
  perspective: 1000px;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.1);
}

#app {
  height: 2000px;
}
4. 參考資料

《Vue.js 實(shí)戰(zhàn)》 作者：梁灝

【譯】vue 自定義指令的魅力

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106790.html

相關(guān)文章

  • Vue 自定義指令

    摘要：自定義指令定義直接看官網(wǎng)的介紹吧覺得官方文檔說的很清楚了，所以我基本都是抄他的了。除了核心功能默認(rèn)內(nèi)置的指令和，也允許注冊自定義指令。然而，有的情況下，你仍然需要對普通元素進(jìn)行底層操作，這時(shí)候就會用到自定義指令。 前言 最近搞了畢設(shè)，需要實(shí)現(xiàn)一個(gè)場景，點(diǎn)擊一塊區(qū)域，彈出一個(gè)編輯區(qū)域，點(diǎn)擊頁面的其他地方的時(shí)候，這個(gè)編輯區(qū)域就隱藏，本想想之前寫模態(tài)框一樣寫個(gè)方法的時(shí)候，突然showImg(...

    you_De 評論0 收藏0

  • 認(rèn)識Vue組件

    摘要：認(rèn)識組件組件是強(qiáng)大的功能之一。注意，所有的組件同時(shí)也都是的實(shí)例，可接受相同的選項(xiàng)對象。組件全局注冊時(shí)通過方式注冊?？紤]到會出現(xiàn)禁止使用的場景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項(xiàng)中定義好傳遞過來的數(shù)據(jù)。 前言 Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架（官方說明）。通俗點(diǎn)來說，Vue.js是一個(gè)輕量級的，易上手易使用的，便捷，靈活性強(qiáng)的前端MVVM框架。簡潔的A...

    xumenger 評論0 收藏0

  • 你應(yīng)該要知道的Vue.js

    摘要：具體步驟實(shí)現(xiàn)將需要的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上和。綜上，在性能上的收益并不是最主要的，更重要的是它使得具備了現(xiàn)代框架應(yīng)有的高級特性。 原文：你應(yīng)該要知道的Vue.js 組件data為什么必須是函數(shù)？ 因?yàn)榻M件可能被多處使用，但他們的data是私有的，所以每個(gè)組件都要return一個(gè)新的data對象 組件通信 父子組件通信：$on、$emit 非父子組件的通信...

    張春雷 評論0 收藏0

  • vue開發(fā)看這篇文章就夠了

    摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁面中的元素是更新之前的鉤子函數(shù)說明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說明實(shí)例銷毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架 庫和框架的區(qū)別 我們所說的前端框架與庫的區(qū)別？ Library 庫，本質(zhì)上是一...

    fsmStudy 評論0 收藏0

  • 每個(gè)人都能實(shí)現(xiàn)的vue自定義指令

    摘要：指令綁定的前一個(gè)值，僅在和鉤子中可用。字符串形式的指令表達(dá)式。上一個(gè)虛擬節(jié)點(diǎn)在上可根據(jù)需要定義一些鉤子函數(shù)只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。指令的值可能發(fā)生了改變，也可能沒有。 前文 先來bb一堆廢話哈哈.. 用vue做項(xiàng)目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項(xiàng)目中遇到一個(gè)問題.(快速點(diǎn)擊按鈕多次觸發(fā)多...

    NickZhou 評論0 收藏0

發(fā)表評論

0條評論

chanjarster

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<