亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解在Vue中通過自定義指令獲取dom元素

 更新時間:2017年03月04日 13:27:07   作者:不帶汽的可樂  
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ,具有一定的參考價值,有興趣的可以了解一下。

vue.js 是數(shù)據(jù)綁定的框架,大部分情況下我們都不需要直接操作 DOM Element,但在某些時候,我們還是有獲取DOM Element的需求的;

 在 vue.js 中,獲取某個DOM Element常用的方法是將這個元素改成一個組件 (component),然后通過 this.$el 去獲取,但是在一些很小的項目里,在一些沒有使用 webpack 等構(gòu)建工具的項目中,創(chuàng)建一個組件并不是那么值得,所以 vue 提供了另一種操作DOM元素的方式,就是自定義指令 (directive) ;

 自定義指令功能在DOM Element的生命周期內(nèi)提供了不同的鉤子函數(shù),并允許我們監(jiān)聽指令綁定的數(shù)據(jù)的變化,但是它也是有缺點的,就是在指令的鉤子函數(shù)內(nèi)無法通過 this 來訪問當前 vue 實例,也就無法進一步進行復雜的操作(雖然一般不需要什么復雜的操作),在 vue 的鉤子函數(shù) (lifecycle hook) 和方法 (method) 中也無法像 this.$el 那樣輕易的訪問到自定義指令綁定的DOM元素;

 不過只要通過一點點變通的做法,就可以突破這個限制:

HTML代碼: 

    <div id="app">
      <span class='test' v-run="register('test1')"></span>
      <p class='test' v-run="register('test2')"></p>
    </div> 

JavaScript代碼:

const vm = new Vue({
  el:'#app',
  data : {
    elements : {}
  },
  directives : {
    run (el, binding) {
      if (typeof binding.value == 'function')
        binding.value(el);
    }
  },
  methods : {
    register (flag) {
      return (el)=>{
        this.elements[flag] = el;
      }
    }
  },
  beforeMount () {
    console.log(this.elements.test1); //=> undefined
  },
  mounted () {
    console.log(this.elements.test1); //=> the span DOM Element
    console.log(this.elements.test2); //=> the p DOM Element
  }
}) 

如代碼所示,建立一個名為 run 的自定義指令,運行綁定的方法,并將當前 DOM Element 作為參數(shù)傳入;
 同時建立一個名為 register 的方法,接收一個 flag 參數(shù),并根據(jù)這個參數(shù)返回一個用于將傳入?yún)?shù)注冊到 this.elements 對象中的閉包函數(shù);

將寫好的 run 指令和 register 方法搭配使用,就可以把想要的 DOM 注冊進this.elements,并在 hook 或者 method 中十分方便的訪問;

 注意:自定義指令將會在DOM元素插入 Document 時,也就是組件 mount 時首次執(zhí)行,所以在此之前,比如 beforeMount 鉤子中是無法使用的,這點也和 this.$el 一致,詳情可以查看官方文檔中的生命周期圖示;

其實也很好理解啦……在 mount 之前,根本就沒有這個實際的 DOM 元素,怎么可能訪問的到……(:з)∠)

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • VsCode工具開發(fā)vue項目必裝插件清單(推薦!)

    VsCode工具開發(fā)vue項目必裝插件清單(推薦!)

    對于很多使用vscode編寫vue項目的新手同學來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • vue中引用阿里字體圖標的方法

    vue中引用阿里字體圖標的方法

    這篇文章主要介紹了vue中引用阿里字體圖標出現(xiàn)錯誤問題的解決方法,感興趣的朋友跟隨腳本之家小編一起學習吧
    2018-02-02
  • 前端vue3項目中百度地圖的使用api以及操作實例

    前端vue3項目中百度地圖的使用api以及操作實例

    最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,但是找了好幾篇文章,發(fā)現(xiàn)都沒辦法成功實現(xiàn),現(xiàn)將方法記錄如下,下面這篇文章主要給大家介紹了關(guān)于前端vue3項目中百度地圖的使用api以及操作實例,需要的朋友可以參考下
    2023-05-05
  • vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法

    vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法

    本文主要介紹了vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2024-01-01
  • VUE配置history路由模式配置詳細舉例

    VUE配置history路由模式配置詳細舉例

    這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下
    2023-12-12
  • Vue路由前后端設(shè)計總結(jié)

    Vue路由前后端設(shè)計總結(jié)

    在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計的知識點總結(jié)內(nèi)容,需要的朋友們參考下。
    2019-08-08
  • vue遞歸獲取父元素的元素實例

    vue遞歸獲取父元素的元素實例

    這篇文章主要介紹了vue遞歸獲取父元素的元素實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue.js 中的 v-cloak 指令及使用詳解

    Vue.js 中的 v-cloak 指令及使用詳解

    這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解,通過案例給大家簡單介紹了vue中v-cloak的使用,感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • vue 動態(tài)組件component

    vue 動態(tài)組件component

    這篇文章主要介紹了 vue 動態(tài)組件component ,vue提供了一個內(nèi)置的<component>,專門用來實現(xiàn)動態(tài)組件的渲染,這個標簽就相當于一個占位符,需要使用is屬性指定綁定的組件,想了解更多詳細內(nèi)容的小伙伴請參考下面文章的具體內(nèi)容
    2021-11-11
  • Vue.js 60分鐘輕松入門

    Vue.js 60分鐘輕松入門

    Vue.js提供了簡潔、易于理解的API,幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學習Vue.js,感興趣的小伙伴們可以參考一下
    2016-11-11

最新評論