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： 動(dòng)態(tài)綁定元素屬性

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

自定義指令

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

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

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

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

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

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

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

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

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)用戶體驗(yàn)。在本文中，我們將探討7個(gè)這樣的HTML屬性，你可能還不知道。

虛擬鍵盤的 enterkeyhint 屬性

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

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

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

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

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

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

記住，這些鍵盤提示的具體表現(xiàn)可能會(huì)因設(shè)備或?yàn)g覽器的不同而略有差異，因?yàn)槊總€(gè)系統(tǒng)或?yàn)g覽器可能會(huì)以自己的方式實(shí)現(xiàn)這些提示。

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

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

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

<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)簽的一個(gè)屬性，用于控制圖像解碼的過程。這個(gè)屬性有三個(gè)可能的取值：

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

這是一個(gè)具體的例子：

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

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

4.iframe 的 loading 屬性

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

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

下面是一個(gè)具體的例子：

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

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

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

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

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

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

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

6. video 的 disablepictureinpicture 屬性

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

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

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

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

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

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

7. script 中的 integrity 屬性

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

這是一個(gè)具體的例子：

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

總結(jié)

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