Vue.js

外觀

本頁內容

內建指令 ​

v-text ​

更新元素的文字內容。

  • 預期： string

  • 詳細資訊

    v-text 透過設定元素的 textContent 屬性來實現，所以它會覆蓋元素中現有的任何內容。如果您需要更新 textContent 的部分，應使用 mustache插值。

  • 示例

    模板
    <span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

  • 另請參閱 模板語法 - 文字插值

v-html ​

更新元素的 innerHTML。

  • 預期： string

  • 詳細資訊

    v-html 的內容被插入為純 HTML - Vue 模板語法不會被處理。如果您發現自己正在嘗試使用 v-html 組合模板，請嘗試重新思考解決方案，使用元件代替。

    安全注意事項

    在您的網站上動態渲染任意 HTML 可能非常危險，因為它很容易導致 XSS 攻擊。僅在使用可信內容時使用 v-html，絕對不要 在使用者提供的內容上使用。

    在 單檔案元件 中，scoped 樣式不會應用於 v-html 內的內容，因為該 HTML 不會被 Vue 的模板編譯器處理。如果您想使用帶有作用域的 CSS 樣式針對 v-html 內容，您可以改用 CSS 模組 或額外的全域性 <style> 元素，並使用如 BEM 之類的手動作用域策略。

  • 示例

    模板
    <div v-html="html"></div>

  • 另請參閱 模板語法 - 原始 HTML

v-show ​

根據表示式值的真偽切換元素的可見性。

  • 預期： 任何

  • 詳細資訊

    v-show 透過內聯樣式設定 display CSS 屬性，並在元素可見時嘗試尊重初始的 display 值。它還會在其條件改變時觸發過渡。

  • 另請參閱 條件渲染 - v-show

v-if ​

根據表示式的真偽有條件地渲染元素或模板片段。

  • 預期： 任何

  • 詳細資訊

    當 v-if 元素切換時，元素及其包含的指令/元件將被銷燬並重新構建。如果初始條件為假，則不會渲染內部內容。

    可以在 <template> 上使用，以表示僅包含文字或多個元素的條件塊。

    此指令在其條件改變時觸發過渡。

    當一起使用時，v-if 的優先順序高於 v-for。我們不推薦在一個元素上同時使用這兩個指令——有關詳細資訊，請參閱 列表渲染指南。

  • 另請參閱 條件渲染 - v-if

v-else ​

表示 v-if 或 v-if / v-else-if 鏈的 "else 塊"。

  • 不期望表示式

  • 詳細資訊

    • 限制：前一個同級元素必須具有 v-if 或 v-else-if。

    • 可以在 <template> 上使用，以表示僅包含文字或多個元素的條件塊。

  • 示例

    模板
    <div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

  • 另請參閱 條件渲染 - v-else

v-else-if ​

表示 v-if 的 "else if 塊"。可以連結。

  • 預期： 任何

  • 詳細資訊

    • 限制：前一個同級元素必須具有 v-if 或 v-else-if。

    • 可以在 <template> 上使用，以表示僅包含文字或多個元素的條件塊。

  • 示例

    模板
    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

  • 另請參閱 條件渲染 - v-else-if

v-for ​

根據源資料多次渲染元素或模板塊。

  • 預期： 陣列 | 物件 | 數字 | 字串 | 可迭代物件

  • 詳細資訊

    指令的值必須使用特殊語法 別名 in 表示式 來提供當前正在迭代的元素的別名。

    模板
    <div v-for="item in items">
  {{ item.text }}
</div>

    或者，您也可以指定對索引（或用於物件的鍵）的別名。

    模板
    <div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

    v-for 的預設行為將嘗試就地修補元素而不移動它們。要強制它重新排列元素，您應使用帶有 key 特殊屬性的排序提示。

    模板
    <div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

    v-for 也可以在實現 可迭代協議 的值上工作，包括原生的 Map 和 Set。

  • 另請參閱

v-on ​

將事件監聽器附加到元素上。

  • 簡寫： @

  • 期望： Function | Inline Statement | Object (without argument)

  • 引數： event (如果使用物件語法，則為可選)

  • 修飾符

    • .stop - 呼叫 event.stopPropagation()。
    • .prevent - 呼叫 event.preventDefault()。
    • .capture - 在捕獲模式下新增事件監聽器。
    • .self - 只有當事件是從該元素派發時才觸發處理器。
    • .{keyAlias} - 只在某些鍵上觸發處理器。
    • .once - 至多觸發處理器一次。
    • .left - 只有在左按鈕滑鼠事件上觸發處理器。
    • .right - 只有在右按鈕滑鼠事件上觸發處理器。
    • .middle - 只有在中按鈕滑鼠事件上觸發處理器。
    • .passive - 附加一個帶有 { passive: true } 的 DOM 事件。

  • 詳細資訊

    事件型別由引數表示。表示式可以是方法名、內聯語句，或者如果存在修飾符，則省略。

    當用於普通元素時，它只監聽 原生 DOM 事件。當用於自定義元素元件時，它監聽該子元件發出的 自定義事件。

    當監聽原生 DOM 事件時，方法接收原生事件作為唯一引數。如果使用內聯語句，則語句可以訪問特殊的 $event 屬性：v-on:click="handle('ok', $event)"。

    v-on 還支援繫結到沒有引數的事件/監聽器物件。請注意，當使用物件語法時，它不支援任何修飾符。

  • 示例

    模板
    <!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter" />

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

    在子元件上監聽自定義事件（當子元件上“my-event”被觸發時，呼叫處理器）

    模板
    <MyComponent @my-event="handleThis" />

<!-- inline statement -->
<MyComponent @my-event="handleThis(123, $event)" />

  • 另請參閱

v-bind ​

將一個或多個屬性，或將元件屬性動態繫結到表示式。

  • 簡寫

    • : 或 .（當使用 .prop 修飾符時）
    • 省略值（當屬性和繫結值具有相同名稱時，需要 3.4+）

  • 期望： any (with argument) | Object (without argument)

  • 引數： attrOrProp (optional)

  • 修飾符

    • .camel - 將短橫線分隔的屬性名稱轉換為 camelCase。
    • .prop - 強制將繫結設定為 DOM 屬性（3.2+）。
    • .attr - 強制將繫結設定為 DOM 屬性（3.2+）。

  • 用法

    當用於繫結 class 或 style 屬性時，v-bind 支援額外的值型別，如 Array 或 Objects。有關更多詳細資訊，請參閱下面的連結指南部分。

    當在元素上設定繫結時，Vue 預設會檢查該元素是否使用 in 運算子定義了作為屬性的鍵。如果屬性已定義，Vue 將將值作為 DOM 屬性而不是屬性設定。這應該在大多數情況下都有效，但您可以透過顯式使用 .prop 或 .attr 修飾符來覆蓋此行為。這有時是必要的，尤其是在與 自定義元素一起工作時。

    當用於元件屬性繫結時，必須在子元件中正確宣告該屬性。

    當沒有引數時，可以用於繫結包含屬性名稱-值對的物件。

  • 示例

    模板
    <!-- bind an attribute -->
<img v-bind:src="imageSrc" />

<!-- dynamic attribute name -->
<button v-bind:[key]="value"></button>

<!-- shorthand -->
<img :src="imageSrc" />

<!-- same-name shorthand (3.4+), expands to :src="src" -->
<img :src />

<!-- shorthand dynamic attribute name -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop binding. "prop" must be declared in the child component. -->
<MyComponent :prop="someThing" />

<!-- pass down parent props in common with a child component -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    .prop 修飾符還有一個專門的簡寫，即 .

    模板
    <div :someProperty.prop="someObject"></div>

<!-- equivalent to -->
<div .someProperty="someObject"></div>

    .camel 修飾符允許在 In-DOM 模板中使用時，將 v-bind 屬性名稱轉換為駝峰式，例如 SVG 的 viewBox 屬性。

    模板
    <svg :view-box.camel="viewBox"></svg>

    如果你使用字串模板，或者在使用構建步驟預編譯模板時，不需要 .camel。

  • 另請參閱

v-model

在表單輸入元素或元件上建立雙向繫結。

v-slot

表示期望接收屬性的名作用域插槽或作用域插槽。

  • 簡寫： #

  • 期望：一個在函式引數位置有效的 JavaScript 表示式，包括對解構的支援。可選 - 只有在期望將屬性傳遞到插槽時才需要。

  • 引數：插槽名稱（可選，預設為 default）

  • 限於

    • <template>
    • 元件（用於具有屬性的唯一預設插槽）

  • 示例

    模板
    <!-- Named slots -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- Named slot that receives props -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- Default slot that receive props, with destructuring -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

  • 另請參閱

v-pre

跳過此元素及其所有子元素的編譯。

  • 不期望表示式

  • 詳細資訊

    在帶有 v-pre 的元素內部，所有 Vue 模板語法都將保留並按原樣渲染。最常見的用例是顯示原始花括號標記。

  • 示例

    模板
    <span v-pre>{{ this will not be compiled }}</span>

v-once

僅渲染元素和元件一次，並跳過未來的更新。

  • 不期望表示式

  • 詳細資訊

    在後續的重新渲染中，元素/元件及其所有子元素將被視為靜態內容並跳過。這可以用於最佳化更新效能。

    模板
    <!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
  <h1>Comment</h1>
  <p>{{msg}}</p>
</div>
<!-- component -->
<MyComponent v-once :comment="msg"></MyComponent>
<!-- `v-for` directive -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

    從 3.2 版本開始，您還可以使用 v-memo 透過無效化條件來快取部分模板。

  • 另請參閱

v-memo

  • 僅支援 3.2+

  • 期望： any[]

  • 詳細資訊

    快取模板的子樹。可以在元素和元件上使用。該指令期望一個固定長度的依賴值陣列，用於比較快取。如果陣列中的每個值都與上次渲染相同，則將跳過整個子樹的更新。例如

    模板
    <div v-memo="[valueA, valueB]">
  ...
</div>

    當元件重新渲染時，如果 valueA 和 valueB 保持不變，則將跳過此 <div> 和其所有子元素的更新。實際上，由於可以重用快取的子樹副本，甚至可以跳過 Virtual DOM VNode 的建立。

    正確指定快取陣列非常重要，否則我們可能會跳過應實際應用的更新。帶有空依賴陣列（v-memo="[]"）的 v-memo 與 v-once 功能上等效。

    與 v-for 一起使用

    v-memo 僅用於效能關鍵場景的微最佳化，通常很少需要。這可能有用的一種最常見情況是在渲染大型 v-for 列表（其中 length > 1000）時。

    模板
    <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

    當元件的selected狀態改變時，即使大多數專案保持完全相同，也會建立大量VNodes。這裡的v-memo使用本質上是在說“只有當專案從非選中狀態變為選中狀態，或相反時才更新此專案”。這允許每個未受影響的項重用其先前的VNode並完全跳過diff。注意，我們不需要在memo依賴陣列中包含item.id，因為Vue會自動從專案的:key推斷它。

    警告：

    當與v-for一起使用v-memo時，請確保它們應用於相同的元素。v-memo在v-for內部不起作用。

    v-memo也可以用於元件，以在子元件更新檢查被去最佳化等某些邊緣情況下手動防止不必要的更新。但再次強調，指定正確的依賴陣列是開發者的責任，以避免跳過必要的更新。

  • 另請參閱

v-cloak ​

用於在模板準備好之前隱藏未編譯的模板。

  • 不期望表示式

  • 詳細資訊

    此指令僅適用於無構建步驟的設定。

    當使用DOM內模板時，可能會出現“未編譯模板閃現”現象：使用者可能會看到直到掛載的元件用渲染內容替換之前的原始mustache標籤。

    v-cloak將保留在元素上，直到關聯的元件例項掛載。結合CSS規則，如[v-cloak] { display: none }，可以用來在元件準備好之前隱藏原始模板。

  • 示例

    css
    [v-cloak] {
  display: none;
}
    模板
    <div v-cloak>
  {{ message }}
</div>

    在編譯完成之前，<div>將不可見。

在GitHub上編輯此頁面