零基礎入門Vue之拘元遣將——其他常用指令&自定義指令

来源:https://www.cnblogs.com/Star-Vik/p/18012413
-Advertisement-
Play Games

迴首 在 零基礎入門Vue之夢開始的地方——插值語法 我記錄了v-bind、v-on、v-model的學習 在 零基礎入門Vue之To be or not to be——條件渲染 我記錄了v-if、v-else-if、v-else、v-show的學習 在 零基礎入門Vue之影分身之術——列表渲染&渲 ...


迴首

零基礎入門Vue之夢開始的地方——插值語法 我記錄了v-bind、v-on、v-model的學習

零基礎入門Vue之To be or not to be——條件渲染 我記錄了v-if、v-else-if、v-else、v-show的學習

零基礎入門Vue之影分身之術——列表渲染&渲染原理淺析 我記錄了v-for的學習

為了推進我的Vue的學習,本篇將一次性介紹其他常用指令,並且記錄如何 自定義指令


其他常用指令

在Vue中,除了已學過的八個指令之外,還有另外五個比較常用的指令


v-text 文本綁定指令

更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。

假設有如下數據:

new Vue({
    el:"#root",
    data(){
        return {
            msg:"Hello world"
        }
    }
})

那麼html除了使用插值語法來顯示msg內容之外,還可以這樣子寫:

<div id="root">
    <span v-text="msg"></span>
</div>

v-html 富文本綁定指令

更新元素的 innerHTML。註意:內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板,可以重新考慮是否通過使用組件來替代

如果是v-text,僅僅只會當作文本解析,但如果我掏出了v-html,那麼我所寫的內容將會作為html來解析

new Vue({
    el:"#root",
    data(){
        return {
            msg:"<h1>Hello worldM</h1>"
        }
    }
})

此時,使用v-html會自動解析<h1>這個標簽

<div id="root">
    <span v-html="msg"></span>
</div>

警告:為了預防xss的攻擊,千萬不要在輸入類元素或者具有提交類元素上使用v-html,請在可信任的元素上使用v-html


v-pre 阻止渲染指令

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。

假設dom節點中,有些元素不需要渲染的,即可給這個節點打上v-pre指令,用法如下:

  <div id="root">
      <span v-pre>這樣子寫:{{data裡面的屬性}} 標識Vue的插值語法</span>
  </div>

span標簽裡面的內容不會被Vue進行解析,這個指令可以提高渲染效率


v-cloak 渲染前標識指令

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時,這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

當給標簽打上v-cloak時,未被解析的標簽,會存在這個屬性,當標簽被解析時,這個屬性消失,因此可以配合css這麼用:

[v-cloak] {
  display: none;
}
<div id="root">
    <span v-html="msg" v-cloak></span>
</div>

當頁面未被解析時,span標簽沒被顯示,只有當頁面被解析完成時,span標簽才會出現

此指令可以語法網路卡頓時,未被解析的內容率先顯示到頁面上


v-once 指令

只渲染元素和組件一次。隨後的重新渲染,元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能

這個指令,使得節點只被解析一次,後續的數據修改,此指令都不會有任何變化

<div id="root">
    <span v-text="msg" v-once></span>
</div>

Vue 自定義指令

在創建Vue配置項中,directives配置項,允許使用的人註冊自定義指令

其中自定義指令可分為:

  • 全局指令
  • 局部指令

局部指令

new Vue({
    el:"#root",
    directives:{
        orderName:{
            bind(el,binding,vnode,oldVnode){}, //指令第一次綁定到元素時調用
            inserted(el,binding,vnode,oldVnode){}, //綁定元素插入父節點調用
            update(el,binding,vnode,oldVnode){}, //當前模板更新前調用(可能不是當前節點的更新)
            componentUpdated(el,binding,vnode,oldVnode){}, //當前模板更新後調用(可能不是當前節點的更新)
            unbind(el,binding,vnode,oldVnode){} //指令解綁時調用
        },

    }
});
<div id="root">
    <!-- 註意雖然js里採用了駝峰命名,但標簽使用時請用-連接每個單詞 -->
    <span v-order-name="1+1">hello</span>
</div>

參數詳解 如下(詳情請查看官網):

  • el:當前綁定節點
  • binding:當前指令的綁定信息
  • vnode:當前虛擬節點
  • oldVnode:上一個虛擬節點

舉個例子:假設我想創建一個v-big,指令使得綁定標簽的文本放大到45px

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 註意雖然js里採用了駝峰命名,但標簽使用時請用-連接每個單詞 -->
        <span v-order-name>hello</span>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        directives:{
            orderName:{
                bind(el,binding,vnode,oldVnode){
                    el.style.fontSize = '45px';
                }
            },
        }
    });
</script>
</html>

改進:如果我希望,這個大小由我自己定義,而不是寫死

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 註意雖然js里採用了駝峰命名,但標簽使用時請用-連接每個單詞 -->
        <span v-order-name="'45px'">hello</span>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        directives:{
            orderName:{
                bind(el,binding,vnode,oldVnode){
                    el.style.fontSize = binding.value;
                }
            },
        }
    });
</script>
</html>

更多的請參考官方例子:簡介


全局指令

在Vue上一小節時,directives配置項配置出來的節點只允許當前Vue實例使用,當涉及到一個自定義指令給多個Vue實例/組件去使用,就該引入全局指令了

在Vue對象上有一個靜態方法:directive

允許用戶設置全局指令,並且能在多個實例中通用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root1">
        <!-- 註意雖然js里採用了駝峰命名,但標簽使用時請用-連接每個單詞 -->
        <span v-order-name="'45px'">hello</span>
    </div>
    <div id="root2">
        <!-- 註意雖然js里採用了駝峰命名,但標簽使用時請用-連接每個單詞 -->
        <span v-order-name="'78px'">hello</span>
    </div>
</body>
<script>
    Vue.directive("orderName",{
        bind(el,binding,vnode,oldVnode){
            el.style.fontSize = binding.value;
        }
    });

    new Vue({
        el:"#root1",
    });

    new Vue({
        el:"#root2",
    });
</script>
</html>

其配置項與局部指令雷同,再次不過多贅述


指令簡寫形式

如果你不關註自定義的指令執行時機的話,你可以直接寫成如下形式:

new Vue({
    el:"#root",
    directives:{
        orderName(){},
    }
});

此時,執行實際,與binding一樣


The End

本篇完~~~


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

-Advertisement-
Play Games
更多相關文章
  • 痞子衡嵌入式半月刊: 第 91 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • 註意本文是SQL執行順序,不是MySQL Server內部執行流程。 MySQL並非像PostgreSQL(被認為是最接近 SQL 標準的資料庫之一)一樣嚴格按照SQL標準,MySQL執行引擎會根據查詢的具體情況和優化策略來決定具體的執行順序,所以SQL執行順序是理論順序。 書寫順序 select. ...
  • 開心一刻 今天我突然頓悟了,然後跟我媽聊天 我:媽,我發現一個餓不死的辦法 媽:什麼辦法 我:我先養個狗,再養個雞 媽:然後了 我:我拉的狗吃,狗拉的雞吃,雞下的蛋我吃,如此反覆,我們三都餓不死 媽:你整那麼多中間商幹啥,你就自己拉的自己吃得了,還省事 我又頓悟了,回到:也是啊 說句很重要的心裡話: ...
  • 寫在前面 和大家不太一樣,我覺得今年的自己更加relax,沒有親戚要走,沒有朋友相聚,也沒有很好的哥們要去敘舊,更沒有無知的相親,甚至可以這麼說沒有那些閑得慌的鄰居。 也可以說是從今天開始,算是可以進入自己的小世界,做自己想做的事,看看書,學習一下。 生活的精髓在於善待自己,用心感受每一刻的歡愉與寧 ...
  • 前言 上回說到,利用vite載入不同mode下的配置文件,可以實現不同運行環境下的參數配置。在前端應用中經常使用到Websocket,其地址同樣可以在.env中間中配置。 代碼 vite.config.ts代碼的執行是在createApp之前,不可以在vite.config.ts中使用例如pinia ...
  • 步驟 根目錄新建.env.development和.env.production文件 package.json配置啟動參數 vite命令啟動項目時,指定mode參數,載入vite.config.ts文件。 "dev": "vite --host 0.0.0.0 --port 8093 --mode ...
  • 找半天沒找到相關的內容,自己搗鼓出來的,記錄一下。(比較可惜的是只能獲取靜態圖片,動態壁紙就不知道了咋弄了) uniapp的話還可以參考一下如何用NJS獲取手機桌面壁紙? - DCloud問答下麵DCloud_heavensoft 大佬的一個回答 : “Native.js很多類型沒有。用uts可以  ...
  • 前言 以前使用的都是預設的博客園主題,最近剛好有空,著手定製以下自己的博客園主題。最終效果參考當前的博客,如果看不到則需要在博客園首頁頭像處懸停關閉簡潔模式 思路是儘量保持原有結構,不進行破壞性改動,以 css 樣式為主 本主題是輕量化的,只是在原有基礎上微調樣式。如有需要更豐富功能的可以自己搜索博 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...