如何寫一個vue指令directive

舉個例子 :clickoutside.js

const clickoutsideContext = '@@clickoutsideContext';export default {/*@param el 指令所綁定的元素@param binding {Object} @param vnode vue編譯生成的虛擬節點*/bind (el, binding, vnode) {const documentHandler = function(e) {console.log(el)console.log(e.target);console.log(vnode);console.log(binding);if(!vnode.context || el.contains(e.target)) {return false;}if (binding.expression) {vnode.context[el[clickoutsideContext].methodName](e)} else {el[clickoutsideContext].bindingFn(e);}}el[clickoutsideContext] = {documentHandler,methodName: binding.expression,bindingFn: binding.value}setTimeout(() => {document.addEventListener('click', documentHandler);}, 0)},update (el, binding) {el[clickoutsideContext].methodName = binding.expression;el[clickoutsideContext].bindingFn = binding.value;},unbind(el) {document.removeEventListener('click', el[clickoutsideContext].documentHandler);}
}

?

directive是怎么實現的呢?

1、在binding中寫綁定方法

2、方法需要寫在一個環境(context)中,放置泄露

如上定義了:el[clickoutsideContext]

轉載于:https://www.cnblogs.com/heyinwangchuan/p/8052211.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/390520.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/390520.shtml
英文地址,請注明出處:http://en.pswp.cn/news/390520.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

安裝angular cli_Angular 9適用于初學者—如何使用Angular CLI安裝第一個應用程序

安裝angular cliAngular is one of the most popular JavaScript frameworks created and developed by Google. In the last couple of years, ReactJS has gained a lot of interest and has become the most popular modern JS library in the industry. But this doesn’t …

leetcode 1818. 絕對差值和

給你兩個正整數數組 nums1 和 nums2 &#xff0c;數組的長度都是 n 。 數組 nums1 和 nums2 的 絕對差值和 定義為所有 |nums1[i] - nums2[i]|&#xff08;0 < i < n&#xff09;的 總和&#xff08;下標從 0 開始&#xff09;。 你可以選用 nums1 中的 任意一個 元素來…

【轉載】keil5中加入STM32F10X_HD,USE_STDPERIPH_DRIVER的原因

初學STM32&#xff0c;在RealView MDK 環境中使用STM32固件庫建立工程時&#xff0c;初學者可能會遇到編譯不通過的問題。出現如下警告或錯誤提示&#xff1a; warning: #223-D: function "assert_param" declared implicitly;assert_param(IS_GPIO_ALL_PERIPH(GPIOx…

下崗職工_下崗后我如何獲得多位軟件工程師的面試

下崗職工“Opportunities to find our deeper powers come when life seems most challenging.” -Joseph Campbell“當生活似乎最具挑戰性時&#xff0c;就有機會找到我們更深層的力量。” 約瑟夫坎貝爾 I was recently laid off for the first time in my life. I realized t…

1846. 減小和重新排列數組后的最大元素

給你一個正整數數組 arr 。請你對 arr 執行一些操作&#xff08;也可以不進行任何操作&#xff09;&#xff0c;使得數組滿足以下條件&#xff1a; arr 中 第一個 元素必須為 1 。任意相鄰兩個元素的差的絕對值 小于等于 1 &#xff0c;也就是說&#xff0c;對于任意的 1 <…

bashdb常用命令

一、列出代碼和查詢代碼類&#xff1a; l 列出當前行以下的10行- 列出正在執行的代碼行的前面10行. 回到正在執行的代碼行w 列出正在執行的代碼行前后的代碼/pat/ 向后搜索pat&#xff1f;pat&#xff1f;向前搜索pat二、Debug控制類&#xff1a; h 幫助help 命令 得到…

podcast播客資源_為什么播客是我的新維基百科-完美的非正式學習資源

podcast播客資源In this article, I’ll explain why podcasts replaced a lot of my Wikipedia usage for informal learning. I’ll also talk about how I listen to 5 hours of podcasts every day.在本文中&#xff0c;我將解釋為什么播客代替了我的許多Wikipedia用于非正…

劍指 Offer 53 - I. 在排序數組中查找數字 I(二分法)

統計一個數字在排序數組中出現的次數。 示例 1: 輸入: nums [5,7,7,8,8,10], target 8 輸出: 2 示例 2: 輸入: nums [5,7,7,8,8,10], target 6 輸出: 0 限制&#xff1a; 0 < 數組長度 < 50000 解題思路 先用二分法查找出其中一個目標元素再向目標元素兩邊查找…

MVC與三層架構區別

我們平時總是將三層架構與MVC混為一談&#xff0c;殊不知它倆并不是一個概念。下面我來為大家揭曉我所知道的一些真相。 首先&#xff0c;它倆根本不是一個概念。 三層架構是一個分層式的軟件體系架構設計&#xff0c;它可適用于任何一個項目。 MVC是一個設計模式&#xff0c;它…

tensorflow 實現邏輯回歸——原以為TensorFlow不擅長做線性回歸或者邏輯回歸,原來是這么簡單哇!...

實現的是預測 低 出生 體重 的 概率。尼克麥克盧爾&#xff08;Nick McClure&#xff09;. TensorFlow機器學習實戰指南 (智能系統與技術叢書) (Kindle 位置 1060-1061). Kindle 版本. # Logistic Regression #---------------------------------- # # This function shows ho…

sdlc 瀑布式 生命周期_SDLC指南–軟件開發生命周期的階段和方法

sdlc 瀑布式 生命周期When I decided to teach myself how to code almost four years ago I had never heard of, let alone thought about, the software development life cycle.當我差不多四年前決定教自己如何編碼時&#xff0c;我從未聽說過軟件開發生命周期&#xff0c;…

劍指 Offer 48. 最長不含重復字符的子字符串

請從字符串中找出一個最長的不包含重復字符的子字符串&#xff0c;計算該最長子字符串的長度。 示例 1: 輸入: “abcabcbb” 輸出: 3 解釋: 因為無重復字符的最長子串是 “abc”&#xff0c;所以其長度為 3。 示例 2: 輸入: “bbbbb” 輸出: 1 解釋: 因為無重復字符的最長子…

Mysql-my-innodb-heavy-4G.cnf配置文件注解

Mysql-同Nginx等一樣具備多實例的特點&#xff0c;簡單的講就是在一臺服務器上同時開啟多個不同的服務端口&#xff08;3306,3307&#xff09;同時運行多個Mysql服務進程&#xff0c;這些服務進程通過不同的socket監聽不同的服務端口來提供服務。這些Mysql多實例公用一套Mysql安…

is 和 == 的區別

is 和 操作符的區別 python官方解釋&#xff1a; 的meaning為equal&#xff1b; is的meaning為object identity&#xff1b; is 判斷對象是否相等&#xff0c;即身份是否相同&#xff0c;使用id值判斷&#xff1b; 判斷對象的值是否相等。id值是什么&#xff1f;id()函數官網…

win10管理凌亂桌面_用于管理凌亂的開源存儲庫的命令行技巧

win10管理凌亂桌面Effective collaboration, especially in open source software development, starts with effective organization. To make sure that nothing gets missed, the general rule, “one issue, one pull request” is a nice rule of thumb.有效的協作(特別是…

JAVA數組Java StringBuffer 和 StringBuilder 類

版權聲明&#xff1a;本文為博主原創文章&#xff0c;未經博主允許不得轉載。 https://blog.csdn.net/qq_34173549/article/details/80215173 Java StringBuffer 和 StringBuilder 類 當對字符串進行修改的時候&#xff0c;需要使用 StringBuffer 和 StringBuilder 類。 和 Str…

strlen和sizeof的長度區別

strlen返回字符長度 而sizeof返回整個數組占多長&#xff0c;字符串的\0也會計入一個長度轉載于:https://www.cnblogs.com/DawaTech/p/8086055.html

了解如何使用Yii2 PHP框架創建YouTube克隆

Yii is a fast, secure, and efficient PHP framework used to create all kinds of web apps. Weve released a full video course on how to use the Yii2 framework.Yii是一個快速&#xff0c;安全&#xff0c;高效PHP框架&#xff0c;用于創建各種Web應用程序。 我們已經發…

劍指 Offer 66. 構建乘積數組

給定一個數組 A[0,1,…,n-1]&#xff0c;請構建一個數組 B[0,1,…,n-1]&#xff0c;其中 B[i] 的值是數組 A 中除了下標 i 以外的元素的積, 即 B[i]A[0]A[1]…A[i-1]A[i1]…A[n-1]。不能使用除法。 示例: 輸入: [1,2,3,4,5] 輸出: [120,60,40,30,24] 提示&#xff1a; 所有…

Statement與PreparedStatement的區別

Statement與PreparedStatement的區別 PreparedStatement預編譯SQL語句&#xff0c;性能好。 PreparedStatement無序拼接SQL語句&#xff0c;編程更簡單. PreparedStatement可以防止SQL注入&#xff0c;安全性好。 Statement由方法createStatement()創建&#xff0c;該對象用于發…