Vue 2 指令是特殊的 HTML 屬性

ue 2 指令是特殊的 HTML 屬性，用于將數(shù)據(jù)綁定到 DOM 元素或執(zhí)行其他操作。它們以 v- 前綴開頭，后面跟著指令名稱。

內(nèi)置指令

Vue 2 提供了許多內(nèi)置指令，用于執(zhí)行常見任務(wù)，例如：

v-model：將數(shù)據(jù)綁定到輸入元素的值

v-text：將數(shù)據(jù)綁定到元素的文本內(nèi)容

v-html：將數(shù)據(jù)綁定到元素的 HTML 內(nèi)容

v-if：根據(jù)條件顯示或隱藏元素

v-for：循環(huán)遍歷數(shù)組并渲染元素

v-on：在元素上添加事件偵聽器

v-bind：動態(tài)綁定元素屬性

v-class：動態(tài)添加或刪除 CSS 類

自定義指令

您還可以創(chuàng)建自己的自定義指令以擴(kuò)展 Vue 的功能。自定義指令由 JavaScript 對象組成，該對象定義指令的鉤子函數(shù)。

指令鉤子函數(shù)包括：

bind：指令首次綁定到元素時調(diào)用

inserted：指令綁定的元素插入 DOM 時調(diào)用

update：指令綁定的元素或其屬性更新時調(diào)用

componentUpdated：指令所在的組件更新時調(diào)用

unbind：指令與元素解綁時調(diào)用

有關(guān) Vue 2 指令的更多信息，請參閱以下資源：

Vue 2 指令文檔 [移除了無效網(wǎng)址]

創(chuàng)建自定義指令 [移除了無效網(wǎng)址]

以下是一些 Vue 2 指令的示例：

v-model 示例

HTML

TML是一種強(qiáng)大的語言，用于創(chuàng)建網(wǎng)頁。雖然大多數(shù)開發(fā)人員熟悉常用的HTML屬性，但還有一些較少人知的屬性可以提供額外的功能并增強(qiáng)用戶體驗。在本文中，我們將探討7個這樣的HTML屬性，你可能還不知道。

虛擬鍵盤的 enterkeyhint 屬性

enterkeyhint 是HTML <input> 標(biāo)簽的一個新屬性，這個屬性會影響虛擬鍵盤的 enter 鍵的樣式和行為，主要用于移動端和平板電腦等設(shè)備上，讓用戶清楚地知道 enter 鍵將執(zhí)行何種動作。這個屬性的典型值有 "enter", "done", "go", "next", "previous", "search", 和 "send" 等。

例如，如果你在一個搜索框中使用 enterkeyhint="search" 屬性，當(dāng)用戶在移動設(shè)備上使用這個搜索框時，enter 鍵將會變?yōu)?#34;搜索"，用戶點擊這個鍵就能提交搜索。

<form action="/search">
  <input type="text" enterkeyhint="search" name="q">
  <input type="submit" value="Search">
</form>

在這個例子中，輸入框的 enterkeyhint 屬性設(shè)置為 "search"，這樣在移動設(shè)備的虛擬鍵盤上，enter 鍵的標(biāo)簽就會變?yōu)?"搜索"。

enterkeyhint 的可能取值及其含義如下：

"enter"：默認(rèn)行為，一般表示一個換行的操作。
"done"：表示完成輸入的操作，比如填寫表單的最后一個字段后，虛擬鍵盤上的按鈕可能會變?yōu)椤巴瓿伞薄?/span>
"go"：表示要導(dǎo)航到一個新的頁面或視圖，或開始一個過程。
"next"：表示用戶將移動到下一個輸入字段，適用于有多個輸入字段的表單。
"previous"：表示用戶將移動到上一個輸入字段，適用于有多個輸入字段的表單。
"search"：表示啟動搜索操作，適用于搜索框。
"send"：表示將發(fā)送消息或其他類型的文本，適用于聊天或郵件應(yīng)用。

記住，這些鍵盤提示的具體表現(xiàn)可能會因設(shè)備或瀏覽器的不同而略有差異，因為每個系統(tǒng)或瀏覽器可能會以自己的方式實現(xiàn)這些提示。

2. 自定義有序列表的屬性

在使用有序列表時，我們可以利用一些較少為人知的屬性來自定義編號的行為。這些屬性包括：

reversed 屬性：它允許我們以相反的順序?qū)α斜眄椷M(jìn)行編號，從高到低，而不是默認(rèn)的從低到高。
start 屬性：它定義了列表應(yīng)該從哪個數(shù)字開始。
type 屬性：它指定列表項使用數(shù)字、字母還是羅馬數(shù)字。
value 屬性：它允許你為特定的列表項設(shè)置自定義編號。

<ol reversed>
  <li>List item...</li>
  <li>List item...</li>
  <li>List item...</li>
</ol>

<ol reversed start="20" type="1">
  <li>Typee: A Peep at Polynesian Life (1846)</li>
  <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
  <li>Mardi: and aVoyage Thither (1849)</li>
  <li>Redburn: His First Voyage (1849)</li>
  <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
  <li>Moby-Dick; or, The Whale (1851)</li>
  <li>Pierre; or, The Ambiguities (1852)</li>
  <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

3. img 的 decoding 屬性

decoding 屬性是 HTML img 標(biāo)簽的一個屬性，用于控制圖像解碼的過程。這個屬性有三個可能的取值：

sync：同步解碼圖像。這將會阻止頁面的繪制，直到圖像被完全解碼。這種方式可能導(dǎo)致更長的首次繪制時間，但在圖像完成解碼后，用戶將能夠立即看到完整的圖像，而不是漸進(jìn)式的加載。
async：異步解碼圖像。這將在圖像下載后的空閑時間進(jìn)行解碼，以避免頁面加載或滾動的延遲。用戶可能會首先看到部分加載的圖像。
auto：默認(rèn)值。瀏覽器自行決定使用同步解碼還是異步解碼。

這是一個具體的例子：

<img src="image.jpg" decoding="async" alt="example image">

在這個例子中，圖像將在空閑時間異步解碼，以避免阻塞頁面的其他渲染過程。請注意，decoding 屬性并非所有的瀏覽器都支持。

4.iframe 的 loading 屬性

loading 是 HTML iframe 標(biāo)簽的一個屬性，主要用于優(yōu)化頁面加載性能。它告訴瀏覽器何時開始加載 iframe 內(nèi)容，可以有以下三個值：

eager：默認(rèn)值。立即加載 iframe。即使 iframe 不在當(dāng)前屏幕視窗（viewport）內(nèi)，也會立即開始加載。
lazy：只有當(dāng) iframe 進(jìn)入或即將進(jìn)入視窗時，才開始加載 iframe。這可以顯著提高頁面加載速度，尤其是對于包含多個 iframe 的頁面。
auto：讓瀏覽器決定何時加載 iframe。

下面是一個具體的例子：

<iframe src="demo.html" loading="lazy"></iframe>

在這個例子中，iframe 會延遲加載，直到它進(jìn)入或即將進(jìn)入視窗。這可以幫助優(yōu)化那些包含了很多 iframe 的頁面的性能。

請注意，在Firefox瀏覽器中，目前不支持iframes上的 loading 屬性，但在大多數(shù)現(xiàn)代瀏覽器中，該屬性適用于圖像。

5. 跨域資源共享（CORS）的 crossorigin 屬性

在處理像 <img> 、 <audio> 、 <video> 、 <script> 和 <link> 這樣的元素時，可能會遇到跨域資源共享（CORS）的需求。 crossorigin 屬性允許我們指定資源在CORS方面的獲取方式。

<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Example Image">

該屬性接受兩個值： anonymous 和 use-credentials 。將其設(shè)置為 anonymous 表示應(yīng)該在獲取資源時不包括用戶憑據(jù)，而 use-credentials 表示應(yīng)該包括用戶憑據(jù)。

6. video 的 disablepictureinpicture 屬性

disablePictureInPicture 是 HTML video 標(biāo)簽的一個屬性，用于控制是否禁止 "畫中畫"（Picture-in-Picture）模式。

畫中畫"模式是一種特殊的播放模式，允許用戶在瀏覽其他網(wǎng)頁或應(yīng)用時繼續(xù)觀看視頻。在這種模式下，視頻會在一個小窗口中播放，這個小窗口可以浮動在屏幕的任何位置。

如果 disablePictureInPicture 屬性被設(shè)置（無論值是什么），則該視頻將不能進(jìn)入 "畫中畫"模式。

<video src="video.mp4" controls disablePictureInPicture></video>

在這個例子中，video 標(biāo)簽有一個 disablePictureInPicture 屬性，這意味著用戶不能將這個視頻切換到 "畫中畫"模式。

但是需要注意的是，并非所有的瀏覽器都支持 "畫中畫"模式，所以 disablePictureInPicture 屬性在某些瀏覽器中可能無效。同時，即使瀏覽器支持 "畫中畫"模式，也有可能因為用戶的個人設(shè)置或其他因素導(dǎo)致 "畫中畫"模式不能被啟用。

7. script 中的 integrity 屬性

integrity 是 HTML script 標(biāo)簽的一個屬性，用于確保加載的腳本沒有被篡改。這個屬性的值是腳本內(nèi)容的 cryptographic hash，通常采用 SRI (Subresource Integrity) hash。如果實際加載的腳本內(nèi)容的 hash 值與 integrity 屬性值不匹配，瀏覽器就不會執(zhí)行這個腳本。

這是一個具體的例子：

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

總結(jié)

在本文中，我們探討了一系列鮮為人知的HTML屬性，這些屬性可以增強(qiáng)您的網(wǎng)頁開發(fā)項目。從改善用戶交互到優(yōu)化資源加載，這些屬性提供了有價值的功能，可能并不被廣泛知曉或利用。

擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！

玩轉(zhuǎn)JavaScript，你得有很扎實的基礎(chǔ)，這些基礎(chǔ)體現(xiàn)在哪里？其中一個最重要的點就是對JavaScript的屬性和方法有足夠的了解和認(rèn)識。這里，我會帶大家一起來徹底消滅這些盲點（對JavaScript屬性和方法的分類還存在模糊的印象）。

首先來說一下屬性：

在JavaScript中屬性有四種類型：私有屬性，原型屬性，實例屬性，類屬性。

對于這四種屬性的區(qū)別和使用，下面，我通過一個代碼來講一下。

上面這段代碼中四個變量：x是私有屬性，z是實例屬性，y是類屬性，m是原型屬性。

接著來看一下屬性的訪問有何差別。

結(jié)果好理解，需要注意幾點：1、私有變量只能在函數(shù)內(nèi)使用。2、當(dāng)實例屬性和原型屬性擁有相同變量時，先會訪問實例屬性，沒有實例屬性就會訪問原型屬性。3、如上面代碼中變量y，只能類才能訪問類屬性，實例不能訪問。

這么一搞，對屬性多少就有了一個更完整的理解和印象了。接下來看一下方法就更好理解了。

來看一下方法：（靜態(tài)方法，實例方法，內(nèi)部方法）

一、靜態(tài)方法（不能被實例對象調(diào)用）

上面f1就是定義了一個靜態(tài)方法，實例無法訪問。

二、實例方法（注意訪問優(yōu)先級）

在JavaScript中定義一個實例方法的方式有三種：構(gòu)造函數(shù)中使用this，直接綁定在實例上，綁定在原型上。下面就通過一段代碼來看一下。

上面這段代碼展示了三種方式定義實例方法。執(zhí)行順序?qū)嵗辖壎ǖ膬?yōu)先級高于this上綁定的，this上綁定的高于原型上綁定的實例方法。

三、內(nèi)部方法（只能內(nèi)部調(diào)用）

上面這段代碼定義了兩個內(nèi)部方法method1和method2。由運行結(jié)果可知，內(nèi)部方法method1和method2只能在函數(shù)內(nèi)部調(diào)用，外部通過實例對象無法找到該方法。

最后總結(jié)一下：

通過這篇文章，我們知道了屬性的定義，屬性分私有屬性，原型屬性，實例屬性，類屬性，這四種，它們各自是怎么定義，及訪問原則。同時我們也知道了方法的定義，方法分靜態(tài)方法，實例方法，內(nèi)部方法三種，主要注意一下它們的調(diào)用，及實例方法的三種創(chuàng)建形式。

在線咨詢

上一篇：HTML 實例
下一篇：python 畫圖-餅圖

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商