vue 自定義指令

geekzhou 發布于2019-08-22 16:18 / 3420人閱讀

摘要：添加新指令只需在中加入模塊，并引入全局中通過綁定全部指令注冊指令業務組件中，加入指令名我們成功完成自定義指令的模塊化完整項目地址

vue 自定義指令篇
對于vue的指令，有我們熟悉的v-model、v-show等，但我們也可以自己定義我們需要的指令，如比較常用的v-lazy懶加載
官方詳細文檔：https://cn.vuejs.org/v2/guide...
通過directive就可以在Vue上注冊指令

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

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：

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

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

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

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

unbind：只調用一次，指令與元素解綁時調用。

指令模塊化
比如我們熟悉的v-show，不看源碼，我們分析v-show這個指令的功能，v-show="true || false"顯示或者因此節點，但元素不占據其本來的空間。因此這可以通過我們常用的display="none"一樣
我們的想法是注冊一個指令，通過給鉤子函數傳遞參數true 或 false去改變節點的display的值

stealth.js

// 元素隱藏顯示指令
export default {
  // 只調用一次，指令第一次綁定到元素時調用
  bind (el, binding, vnode) {
    el.style.display = binding.value ? "block" : "none"
  },
  // 被綁定元素插入父節點時調用
  inserted (el, binding, vnode) {
    console.log("inserted")
  },
  // 所在組件的 VNode 更新時調用
  update (el, binding, vnode) {
    console.log("update")
    el.style.display = binding.value ? "block" : "none"
  },
  // 指令所在組件的 VNode 及其子 VNode 全部更新后調用
  componentUpdated (el, binding, vnode) {
    console.log("componentUpdated")
  },
  unbind (el, binding, vnode) {
    console.log("unbind")
  }
}

指令模塊化，通過index.js管理自定義指令。添加新指令只需在modules中加入模塊，并引入
index.js

import stealth from "./modules/stealth"
export {stealth}

全局Vue中通過directive綁定全部指令
mian.js

import * as directives from "./directives"
// 注冊指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))

業務組件中，加入v-*(指令名)

我們成功完成自定義指令的模塊化

完整項目github地址：https://github.com/hty7/vue-demo

GPU云服務器云服務器自定義指令自定義指令實例大云軟件定義存儲支持的指令架構自定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94231.html

每個人都能實現的vue自定義指令

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

NickZhou 2019-08-21 18:23 評論0 收藏0
Vue 混合、自定義指令、插件

摘要：當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合自定義指令除了默認設置的核心指令和也允許注冊自定義指令。 vue的復用性與組合混合混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合 ...

whlong 2019-08-21 16:17 評論0 收藏0
使用vue自定義指令開發一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
vue自定義指令升級2.0的坑

摘要：如今升級后，在自定義指令部分的全部變化了對于一個插件作者來說這簡直是崩潰的毫無兼容可言。本文我就講介紹下一個自定義指令從升級到所走的坑。吐槽我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。前言從1.0.X版本就開始使用vue了，應該也是vue很早的一批用戶。在我司使用vue這一年多以來（偏向移動端），我發現vue的插件真的是少之又少，這也是我當初一開始想寫v-...

jokester 2019-08-22 10:43 評論0 收藏0
Vue 自定義指令

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

you_De 2019-08-23 13:42 評論0 收藏0