• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      Vue自定義指令的學習理解(代碼示例)

      時間:2021-3-25作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于Vue自定義指令的學習理解(代碼示例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      最近搞了畢設,需要實現一個場景,點擊一塊區域,彈出一個編輯區域,點擊頁面的其他地方的時候,這個編輯區域就隱藏,本想想之前寫模態框一樣寫個方法的時候,突然覺得可以嘗試用 vue 相關的東西優雅的解決這個事情,然后就學了下面的自定義指令了。

      1 Vue 自定義指令

      1.1 定義

      直接看官網的介紹吧(覺得官方文檔說的很清楚了,所以我基本都是抄他的了)。

      除了核心功能默認內置的指令 (v-model 和 v-show),Vue 也允許注冊自定義指令。注意,在 Vue2.0 中,代碼復用和抽象的主要形式是組件。然而,有的情況下,你仍然需要對普通 DOM 元素進行底層操作,這時候就會用到自定義指令。

      1.2 基礎實現

      這個在分兩種情況,如果你想定義一個全局的自定義組件的話,那么就在項目中的 main.js 里面定義了,例如定義一個官網中的自動聚焦的指令

      // 注冊一個全局自定義指令 `v-focus`
      Vue.directive('focus', {
        // 當被綁定的元素插入到 DOM 中時……
        inserted: function (el) {
          // 聚焦元素
          el.focus()
        }
      })

      要是你只是想定義一個局部的指令在某個組件內部用的話,那么就在相應的組件內定義了

      // 跟 data(),methods:{} 那些同級寫了
      directives: {
        focus: {
          // 指令的定義
          inserted: function (el) {
            el.focus()
          }
        }
      }

      定義完后我們就能愉快的使用了

      <input v-focus>

      1.2 鉤子函數

      當然這個自定義指令不會就這么一點東西啦,為了解決一些現實中場景,Vue 給我們一堆鉤子函數用來實現我們的一些騷操作。具體如下 (均為可選):

      bind:只調用一次,指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

      inserted:被綁定元素插入父節點時調用 (僅保證父節點存在,但不一定已被插入文檔中)。

      update:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

      componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調用。

      unbind:只調用一次,指令與元素解綁時調用。

      接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

      當然要想好好用用這寫鉤子函數,就要懂得用下面的這些參數

      1.3 鉤子函數參數

      指令鉤子函數會被傳入以下參數:

      el:指令所綁定的元素,可以用來直接操作 DOM 。

      binding:一個對象,包含以下屬性:

      name:指令名,不包括 v- 前綴。

      value:指令的綁定值,例如:- v-my-directive="1 + 1" 中,綁定值為 2。

      oldValue:指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

      expression:字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。

      arg:傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"。

      modifiers:一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { - foo: true, bar: true }。

      vnode:Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

      oldVnode:上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。

      然后官網有話說

      除了 el 之外,其它參數都應該是只讀的,切勿進行修改。如果需要在鉤子之間共享數據,建議通過元素的 dataset 來進行。

      然后下面我們給一個簡單的例子

      // 在組件內部定義一個局部指令
      directives:{
        demo:{
          bind: function (el, binding, vnode) {
            var s = JSON.stringify;
            el.innerHTML = 
              `name: ${s(binding.name)} <br>
              value: ${s(binding.value)} <br>
              expression: ${s(binding.expression)} <br>
              argument: ${s(binding.arg)} <br>
              modifiers: ${s(binding.modifiers)} <br>
              vnode keys: ${Object.keys(vnode).join(', ')}`
          }
        }
      }
       // 綁定到組件中的一個 div 中
      <div v-demo:foo.a.b="message"></div>

      然后我們在網頁中就可以看到這么一堆文字了(當然下面的注釋是我自己寫的)

      name: "demo" 
      // 指定名稱
      value: "Welcome to Your Vue.js App" 
      // 指令綁定值
      expression: "message" 
      // 字符串形式的指令表達式
      argument: "foo" 
      // 傳給指令的參數
      modifiers: {"a":true,"b":true} 
      // 修飾符的對象
      vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
      // Vue 編譯生成的虛擬節點

      1.4 函數簡寫

      在很多時候,你可能想在 bind 和 update 時觸發相同行為,而不關心其它的鉤子。比如這樣寫:

      colorSwatch: function colorSwitch(el, binding) {
        el.style.backgroundColor = binding.value
      },

      1.5 對象字面量

      如果指令需要多個值,可以傳入一個 JavaScript 對象字面量。記住,指令函數能夠接受所有合法的 JavaScript 表達式。

      <div v-demo="{ color: 'white', text: 'hello!' }"></div>
      Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color) // => "white"
        console.log(binding.value.text)  // => "hello!"
      })

      以上就是Vue自定義指令的學習理解(代碼示例)的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:Vue自定義指令的學習理解(代碼示例)




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产