Vue的土著指令和自定義指令

来源:https://www.cnblogs.com/lunlunshiwo/archive/2018/02/02/8407151.html
-Advertisement-
Play Games

1.土著指令 當我開始學習Vue的時候,看官網的時候看到了“指令”兩個字。我愣住了,what?指令是啥啊?後來繼續往下看,像這種什麼“v-for”“v-show”“v-if”都叫做指令。等到後來Vue玩的差不多了,開始寫項目的時候發現,常見的指令也就那麼幾個,比如“v-if”“v-show”“v-m ...


1.土著指令

  當我開始學習Vue的時候,看官網的時候看到了“指令”兩個字。我愣住了,what?指令是啥啊?後來繼續往下看,像這種什麼“v-for”“v-show”“v-if”都叫做指令。等到後來Vue玩的差不多了,開始寫項目的時候發現,常見的指令也就那麼幾個,比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”。

  你可以認為這是一種語法糖或者這是一種命令。在常見的這些指令中,大體的使用方法如下:

    1. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值。

    2. v-show:any 用法:根據表達式真假值,切換元素的 display css 屬性 。

    3. v-if:any  用法:表達式的真假條件渲染元素。在切換時元素以及它的數據綁定/組件被銷毀並且重建。如果是<template>,並提出它的內容作為條件塊。 條件變化時改指令出發過渡效果。

    4. v-for :Array | Object | number | string  用法:基於源數據多次渲染元素或者模板塊 語法:alias in expression。

    5. v-on:Function |  Inline Statement  參數 $event( required) 修飾符。 

    6. v-bind:any 類型: any (with argument)  | Object  (without argument) 參數:attrOrProp (optional) ;修飾符: .prop ---被用於綁定DOM 屬性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在綁定 class 和 style 特性時,支持其它類型的值。如對象和數組;在綁定prop時,子組件必須聲明prop。

    7. v-model :限制<input> <select> components 。

2.自定義指令

   但是,僅僅靠上面的這些有時候是不夠的,比如最近我司做的一個項目中,UI做了一個頁面。然後我和UI在聊需求的時候,我說這個輸入框吧最好給他加一個效果,彈出輸入框的時候獲得焦點,顯示一個跳動的游標。這樣用戶可以更清楚的看到在哪輸入。

 

  達成共識之後,寫功能的時候我突然發現,WTF?我這是用的Vue啊,數據驅動視圖啊,總不能document.getElementById(inputid).focus()吧。

  於是乎,我就去找文檔,突然發現了一個單詞directive,我去查了查這個單詞的意思:

  看了一下文檔,大體意思就是,雖然吧這個v-model和v-show已經很好用了,但是總是擋不住天馬行空的前端人員的騷操作,所以在有的情況下,需要對普通 DOM 元素進行底層操作,這時候就會用到自定義指令。當然呢,官方的例子就是我需要的這個,當即我就get了一波新知識。

  如同我隨手寫下的這個HTML,裡面有一個v-focus,大概沒見過,這是啥?別急,繼續往下看:

 

 

  沒錯,這個v-focus就是我自己定義的指令,當然啦,你也可以用除了關鍵字之外的單詞去命名,方便自由。

  我們來看一下這個自定義指令,相信大家對下麵的這部分都明白,無非就是如果value的值等同於true,那麼el就focus即獲得焦點。

  那個前面的update什麼意思呢?update是更新的意思,這是一個鉤子函數,即focusState更新時調用function,在調用函數時,繼續判斷focusState——如果真,則獲得焦點;為假,一邊涼快去吧。同樣,我們在查看官方文檔的時候,就會發現,同樣的鉤子函數還有:

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

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

  • update:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新。

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

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

 

利用這些操作,我們可以完成很多比較騷的套路,比如可以在載入大的圖片時,可以先用純色占位,當圖片載入完成後才直接渲染出來。例如下圖:

  在這個例子中,我們調用的鉤子函數是inserted,即插入父節點後觸發。當圖片還未載入好時,先用隨機的顏色代替,等圖片載入好之後,去掉背景色,替換成圖片。

  我們在此處傳入的參數為el----當前的dom節點和binding-----一個對象,包含以下屬性:

  • def:鉤子函數。

  • rawName:指令的名稱。

  • value:向指令傳入的值

 

  同樣,我們也可以封裝多種已經造好的輪子為自定義指令。畢竟,我們站在巨人的肩膀上才會看的更遠,走的更遠。

 


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

-Advertisement-
Play Games
更多相關文章
  • 一般在做數據統計的時候會用到行轉列,假如要統計學生的成績,資料庫里查詢出來的會是這樣的,但這並不能達到想要的效果,所以要在查詢的時候做一下處理 CREATE TABLE TestTable( [Id] [int] IDENTITY(1,1) NOT NULL, [UserName] [nvarcha ...
  • [精品] 支付組件 簡要說明該組件為封裝了 微信,支付寶,銀聯支付, 一鍵快速集成,幾行代碼即可集成 微信,支付寶,銀聯支付。 ## 示例: # 測試賬號:1、銀聯支付:提供測試使用卡號、手機號信息(此類信息僅供測試,不會發生正式交易)招商銀行借記卡:6226090000000048 手機號:181 ...
  • 由類的關係圖發現原來ViewFlipper是ViewAnimator的子類,而ViewAnimator又是FrameLayout的子類。看到這個繼承關係是否對ViewFlipper的工作原理有一定的猜想? 其實ViewFlipper工作機制很簡單,如上圖,就是將添加到ViewFlipper中的子Vi ...
  • 關於inflate參數問題,我想很多人多多少少都瞭解一點,網上也有很多關於這方面介紹的文章,但是枯燥的理論或者翻譯讓很多小伙伴看完之後還是一臉懵逼,so,我今天想通過三個案例來讓小伙伴徹底的搞清楚這個東東。本篇博客我們不講源碼,只看使用。源碼的解讀會在下一篇博文中帶來。 inflate方法從大範圍來 ...
  • **分為4個流程**> 1. 源碼下載> 2. 構建編譯環境> 3. 編譯源碼> 4. 運行### 源碼下載#### 安裝git並且配置```//安裝gitsudo apt-get install git//配置git名稱和郵箱git config --global user.name "your ... ...
  • 本篇項目地址,名字是AudioRecord錄音(能暫停,將pch轉換為wav),求starhttps://github.com/979451341/Audio-and-video-learning-materials先來段官方說明 1.AndioRecord大概說明 AndioRecord類的主要功 ...
  • 說明:cookie的操作須有功能變數名稱,簡單點說就是需要用發佈的方式去訪問,查看cookie信息請用開發者模式進入application欄 1.頁面佈局(結構)(根目錄) 商品列表 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 先走一波效果圖! 本人網站--http://www.wenzheng.club/ ps:效果還是不錯的,支持QQ微信登錄,支持表情,甚至gif動圖評論! 插件採用南韓伺服器的來必力評論插件--https://livere.com/ 電腦端效果如下 2018-02-0223:05:56 下麵是手機端 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...