亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

vue 自定義指令

geekzhou / 3466人閱讀

摘要：添加新指令只需在中加入模塊，并引入全局中通過(guò)綁定全部指令注冊(cè)指令業(yè)務(wù)組件中，加入指令名我們成功完成自定義指令的模塊化完整項(xiàng)目地址

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

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

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

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

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

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

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

stealth.js

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

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

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

全局Vue中通過(guò)directive綁定全部指令
mian.js

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

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

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

完整項(xiàng)目github地址：https://github.com/hty7/vue-demo

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94231.html

相關(guān)文章

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

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

    NickZhou 評(píng)論0 收藏0

  • Vue 混合、自定義指令、插件

    摘要：當(dāng)組件和混合對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌献远x指令除了默認(rèn)設(shè)置的核心指令和也允許注冊(cè)自定義指令。 vue的復(fù)用性與組合 混合 混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；旌蠈?duì)象可以包含任意組件選項(xiàng)。以組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。 當(dāng)組件和混合對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌? ...

    whlong 評(píng)論0 收藏0

  • 使用vue自定義指令開(kāi)發(fā)一個(gè)表單驗(yàn)證插件validate.js

    摘要：今天就來(lái)介紹一下如何利用的自定義指令來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)程。按照這種方式就能夠使用自己開(kāi)發(fā)的這個(gè)表單校驗(yàn)插件。這段時(shí)間在進(jìn)行一個(gè)新項(xiàng)目的前期搭建，新項(xiàng)目框架采用vue-cli3和typescirpt搭建。因?yàn)轫?xiàng)目比較輕量，所以基本沒(méi)有使用額外的ui組件，有時(shí)候我們需要的一些基礎(chǔ)組件我就直接自己開(kāi)發(fā)了。今天就來(lái)介紹一下如何利用vue的自定義指令directive來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)...

    warnerwu 評(píng)論0 收藏0

  • vue自定義指令升級(jí)2.0的坑

    摘要：如今升級(jí)后，在自定義指令部分的全部變化了對(duì)于一個(gè)插件作者來(lái)說(shuō)這簡(jiǎn)直是崩潰的毫無(wú)兼容可言。本文我就講介紹下一個(gè)自定義指令從升級(jí)到所走的坑。吐槽我們知道，一個(gè)方法最重要的就是傳參，所以自定義指令最需要的也是這點(diǎn)。 前言 從1.0.X版本就開(kāi)始使用vue了，應(yīng)該也是vue很早的一批用戶。在我司使用vue這一年多以來(lái)（偏向移動(dòng)端），我發(fā)現(xiàn)vue的插件真的是少之又少，這也是我當(dāng)初一開(kāi)始想寫(xiě)v-...

    jokester 評(píng)論0 收藏0

  • Vue 自定義指令

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

    you_De 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<