vue3自定義指令的使用

来源:https://www.cnblogs.com/IwishIcould/archive/2022/06/18/16388498.html
-Advertisement-
Play Games

定義指令的變化 根據vue3文檔的描述 https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0 自定義指令的 API 已更改為與組件生命周期一致。 且 binding ...


定義指令的變化

根據vue3文檔的描述
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0
自定義指令的 API 已更改為與組件生命周期一致。
且 binding.expression 已移除。
也就是說vue2的自定義鉤子函數被移除了。
我們不能夠在使用vue2的自定鉤子函數了

vue2的自定義鉤子函數

bind (){} 指令綁定到元素後調用。只調用一次。主要用來操作css
inserted (){} 元素插入父 DOM 後調用。有關的DOM操作可以放在這個鉤子函數中。
update(){} - 當元素更新,但子元素尚未更新時,將調用此鉤子。
componentUpdated(){}- 一旦組件和子級被更新,就會調用這個鉤子。
unbind(){} - 一旦指令被移除,就會調用這個鉤子。也只調用一次。

ps:vue3中上面的這5個鉤子函數將不能夠在使用了。
  已經被移除了。大家不要在使用了。

vue3的自定義鉤子函數

created - 新增!在元素的 attribute 或事件監聽器被應用之前調用。 
bind 變為 → beforeMount 在元素被插入到 DOM 前調用,通常進行css的操作
inserted 變為→ mounted 可以進行DOM操作
beforeUpdate:新增!在元素本身被更新之前調用,與組件的生命周期鉤子十分相似。
update → 移除!該鉤子與 updated 有太多相似之處,因此它是多餘的。請改用 updated。
componentUpdated → updated
beforeUnmount:新增!與組件的生命周期鉤子類似,它將在元素被卸載之前調用。
unbind -> unmounted

vue3自定義指令最終的APi如下

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // 新增
  beforeMount(el, binding, vnode) {},
  mounted() {},
  beforeUpdate() {}, // 新增
  updated() {},
  beforeUnmount() {}, // 新增
  unmounted() {}
}

created(el, binding, vnode, prevVnode) {}參數講解

第1個參數el: 指令綁定的DOM元素。可以直接去操作的哈。
第2個參數binding:是一個對象,包含 
{ 
  arg:'', 
  dir:{},
  instance:Proxy,
  modifiers:{},
  value:'傳遞的指令值'
}

定義一個簡單的顏色指令

在main.ts文件中。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App);

// 定義全局自定義指令
app.directive("bg", {
    // 在元素的 attribute 或事件監聽器被應用之前調用   
    created(el, binding, vnode, prevVnode) {
    },
    
    // 在元素被插入到 DOM 前調用,通常進行css的操作
    beforeMount(el, binding, vnode) {
        el.style.background = binding.value
    }
});

app.use(router).mount('#app')

在使用的頁面

<template>
	<div>
		<!-- 註意pink需要引號 -->
		<div v-bg="'pink'">
			<p>自定指令</p>
			<p>定義的是顏色</p>
		</div>
	</div>
</template>

什麼是防抖 ?

什麼是防抖:當持續觸發事件時,【一定時間段內】該事件沒有被觸發。
事件處理函數才會被執行一次。
如果設定的時間到來之前,又觸發了事件,就重新開始延時。

自定義防抖指令

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
const app = createApp(App);
// 定義全局自定義指令
app.directive("debounce", {
  mounted(el, binding) {
    // 如果不是函數或者不是事件直接返回
    if (typeof binding.value.fn !== "function" || !binding.value.event) return;
    // 預設的延遲時間
        let delay = 400;
        el.timer = null;
        console.log('多次執行')
        el.handler = function () {
          if (el.timer) {
            clearTimeout(el.timer);
          }
          el.timer = setTimeout(() => {
            binding.value.fn.apply(this, arguments);
          },binding.value.delay || delay);
        };
        el.addEventListener(binding.value.event, el.handler);
  },
  // 元素卸載前清理定需要清除:延時器並且移除監聽事件
  beforeUnmount(el, binding) {
      console.log(el,'即將卸載');
      if (el.timer) {
          el.timer = null;
          clearTimeout(el.timer);
      }
      el.removeEventListener(binding.value.event, el.handler);
  },
});
app.use(router).mount("#app");

使用防抖

<template>
    <div>
	<button v-debounce="{ fn: handler, event: 'click', delay: 300}">
            點擊我呀
       </button>
    </div>
</template>

<script setup lang="ts">
const handler = ():void => {
	console.log('防抖點擊');
}
</script>

遇見問題,這是你成長的機會,如果你能夠解決,這就是收穫。

作者:明月人倚樓
出處:https://www.cnblogs.com/IwishIcould/

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關註博主,在此感謝!

萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段聲明,在文章頁面明顯位置給出原文連接
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、功能變數名稱系統概述 功能變數名稱系統DNS(Domain Name System)是網際網路使用的命名系統,用來把便於人們使用的機器名字轉換成為IP地址。功能變數名稱系統其實就是名字系統。為什麼不叫“名字”而叫“功能變數名稱”呢?這是因為在這種網際網路的命名系統中使用了許多的“域(domain)”,因此就出現了“功能變數名稱”這個名詞。 ...
  • vmstat 是一個查看虛擬記憶體(Virtual Memory)使用狀況的工具,但是怎樣通過 vmstat 來發現系統中的瓶頸呢? 1。 使用vmstat 使用前我們先看下命令介紹及參數定義 Usage: vmstat [options] [delay [count]] Options: -a, - ...
  • Air105 的時鐘 高頻振蕩源 * 晶元支持使用內部振蕩源, 或使用外置12MHz晶體 * 晶元上電覆位後 ROM boot 啟動過程基於內部12MHz的振蕩器 * 晶元內部集成的12MHz振蕩源精度為±2%, 精度一般 * 使用外置12MHz晶體, 需要軟體切換 * 經過PLL倍頻後為系統提供... ...
  • 寫在前面 前些天看了一本漫畫,裡面一個老技術人員的話,讓我不自覺的想到很多東西。 是啊,有時候我們自認為的自我實現,其實就是在湊這個時代的熱鬧,每個時代都有自己的熱鬧,個人之於時代不過是浪花一朵朵。 但這並不能作為我們不去湊這個熱鬧的理由,你去湊時代的這個熱鬧,這個時代必會給予你獎勵,或早或晚,或大 ...
  • 1、Linux常用命令 1.1、Linux命令初體驗 在日常使用過程當中經常使用到的命令有如下幾種 命令 對應英文 作用 ls [目錄名] list 查看當前目錄下的內容 pwd print work directory 查看當前所在目錄 cd [目錄名] change directory 切換目錄 ...
  • 導讀: 本文主要介紹了快手的精排模型實踐,包括快手的推薦系統,以及結合快手業務展開的各種模型實戰和探索,全文圍繞以下幾大方面展開: 快手推薦系統 CTR模型——PPNet 多domain多任務學習框架 短期行為序列建模 長期行為序列建模 千億特征,萬億參數模型 總結和展望 -- 01 快手推薦系統 ...
  • SQL的約束 概述 概念:約束是作用於表中欄位上的規則,用於限制存儲表中的數據; 目的:保證資料庫中數據的正確性、有效性、完整性; 常見的約束分類: 約束 描述 關鍵字 非空約束 限制該欄位的數據不能為null not null 唯一約束 保證該欄位的所有數據都是唯一的、不重覆的 unique 主鍵 ...
  • 自定義封裝分頁器組件之前需要知道的數據: 1.當前的頁碼 2.總共多少條數據 3.每頁展示多少條數據 4.連續頁碼數(5|7) 5.總頁數 計算連續頁碼數的起始值和結束值 //通過計算屬性來計算出來 computed:{ startNumAndEndNum(){ //首先先結構出我們需要的值(當前頁 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 準備開個系列來聊一下 PerfView 這款工具,熟悉我的朋友都知道我喜歡用 WinDbg,這東西雖然很牛,但也不是萬能的,也有一些場景他解決不了或者很難解決,這時候藉助一些其他的工具來輔助,是一個很不錯的主意。 很多朋友喜歡在項目中以記錄日誌的方式來監控項目的流轉情況,其實 CoreCL ...
  • 本來閑來無事,準備看看Dapper擴展的源碼學習學習其中的編程思想,同時整理一下自己代碼的單元測試,為以後的進一步改進打下基礎。 突然就發現問題了,源碼也不看了,開始改代碼,改了好久。 測試Dapper.LiteSql數據批量插入的時候,耗時20秒,感覺不正常,於是我測試了非Dapper版的Lite ...
  • 需求如下,在DEV框架項目中,需要在表格中增加一列顯示圖片,並且能編輯該列圖片,然後進行保存等操作,最終效果如下 這裡使用的是PictureEdit控制項來實現,打開DEV GridControl設計器,在ColumnEdit選擇PictureEdit: 綁定圖片代碼如下: DataTable dtO ...
  • 前兩天微軟偷偷更新了Visual Studio 2022 正式版版本 17.3 發佈,發佈摘要: MAUI 工作負荷 GA 生成 MAUI/Blazor CSS 熱重載支持 現在,你將能夠使用我們的新增功能在 Visual Studio 中使用每個更新試用一系列新功能。 選擇每個功能以瞭解有關特定功 ...
  • 航天和軍工領域的數字化轉型和建設正在積極推進,在與航天二院、航天三院、航天六院、航天九院、無線電廠、兵工廠等單位交流的過程中,用戶更聚焦試驗和生產過程中的痛點,迫切需要解決軟體平臺統一監測和控制設備及軟體與設備協同的問題。 ...
  • .NET 項目預設情況下 日誌是使用的 ILogger 介面,預設提供一下四種日誌記錄程式: 控制台 調試 EventSource EventLog 這四種記錄程式都是預設包含在 .NET 運行時庫中。關於這四種記錄程式的詳細介紹可以直接查看微軟的官方文檔 https://docs.microsof ...
  • 一:背景 上一篇我們聊到瞭如何去找 熱點函數,這一篇我們來看下當你的程式出現了 非托管記憶體泄漏 時如何去尋找可疑的代碼源頭,其實思路很簡單,就是在 HeapAlloc 或者 VirtualAlloc 時做 Hook 攔截,記錄它的調用棧以及分配的記憶體量, PerfView 會將這個 分配量 做成一個 ...
  • 背景 在 CI/CD 流程當中,測試是 CI 中很重要的部分。跟開發人員關係最大的就是單元測試,單元測試編寫完成之後,我們可以使用 IDE 或者 dot cover 等工具獲得單元測試對於業務代碼的覆蓋率。不過我們需要一個獨立的 CLI 工具,這樣我們才能夠在 Jenkins 的 CI 流程集成。 ...
  • 一、應用場景 大家在使用Mybatis進行開發的時候,經常會遇到一種情況:按照月份month將數據放在不同的表裡面,查詢數據的時候需要跟不同的月份month去查詢不同的表。 但是我們都知道,Mybatis是ORM持久層框架,即:實體關係映射,實體Object與資料庫表之間是存在一一對應的映射關係。比 ...
  • 我國目前並未出台專門針對網路爬蟲技術的法律規範,但在司法實踐中,相關判決已屢見不鮮,K 哥特設了“K哥爬蟲普法”專欄,本欄目通過對真實案例的分析,旨在提高廣大爬蟲工程師的法律意識,知曉如何合法合規利用爬蟲技術,警鐘長鳴,做一個守法、護法、有原則的技術人員。 案情介紹 深圳市快鴿互聯網科技有限公司 2 ...