Vue中的常用內置指令有哪些

這篇文章主要介紹了Vue中的常用內置指令有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中的常用內置指令有哪些文章都會有所收獲，下面我們一起來看看吧。

0. 插值表達式

說明：插值表達式也叫Mustache語法(即雙大括號)，雙大括號標簽會被替換為相應組件實例中 msg 屬性的值。同時每次 msg 屬性更改時它也會同步更新。

  <template id="my-app">
    <!-- 1.mustache的基本使用 -->
    <h3>{{message}} - {{message}}</h3>
    
    <!-- 2.是一個表達式 -->
    <h3>{{counter * 10}}</h3>
    <h3>{{ message.split(" ").reverse().join(" ") }}</h3>
    
    <!-- 3.也可以調用函數 -->
    <!-- 可以使用computed(計算屬性) -->
    <h3>{{getReverseMessage()}}</h3>
    
    <!-- 4.三元運算符 -->
    <h3>{{ isShow ? "哈哈哈": "" }}</h3>
    <button @click="toggle">切換</button>

    <!-- 錯誤用法 -->
    <!-- var name = "abc" -> 賦值語句 -->
    <!-- <h3>{{var name = "abc"}}</h3>
    <h3>{{ if(isShow) {  return "哈哈哈" } }}</h3> -->
  </template>

1. v-on

說明： 給元素綁定事件監聽器。

縮寫：@

參數： 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 還支持綁定不帶參數的事件/監聽器對的對象。請注意，當使用對象語法時，不支持任何修飾符。

<!-- 方法處理函數 -->
<button v-on:click="doThis"></button>

<!-- 動態事件 -->
<button v-on:[event]="doThis"></button>

<!-- 內聯聲明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 使用縮寫的動態事件 -->
<button @[event]="doThis"></button>

<!-- 停止傳播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認事件 -->
<button @click.prevent="doThis"></button>

<!-- 不帶表達式地阻止默認事件 -->
<form @submit.prevent></form>

<!-- 鏈式調用修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按鍵用于 keyAlias 修飾符-->
<input @keyup.enter="onEnter" />

<!-- 點擊事件將最多觸發一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象語法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

說明： 動態的綁定一個或多個 attribute，也可以是組件的 prop。

縮寫： : 或者 . (當使用 .prop 修飾符)

修飾符：

• .camel ——將短橫線命名的 attribute 轉變為駝峰式命名。

• .prop ——強制綁定為 DOM property。3.2+

• .attr ——強制綁定為 DOM attribute。3.2+

用途：

• 當用于綁定 class 或 style attribute，v-bind 支持額外的值類型如數組或對象。詳見下方的指南鏈接。

• 在處理綁定時，Vue 默認會利用 in 操作符來檢查該元素上是否定義了和綁定的 key 同名的 DOM property。如果存在同名的 property，則 Vue 會把作為 DOM property 賦值，而不是作為 attribute 設置。這個行為在大多數情況都符合期望的綁定值類型，但是你也可以顯式用 .prop 和 .attr 修飾符來強制綁定方式。有時這是必要的，特別是在和自定義元素打交道時。

• 當用于組件 props 綁定時，所綁定的 props 必須在子組件中已被正確聲明。

• 當不帶參數使用時，可以用于綁定一個包含了多個 attribute 名稱-綁定值對的對象。

<!-- 綁定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 動態 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 縮寫 -->
<img :src="imageSrc" />

<!-- 縮寫形式的動態 attribute 名 -->
<button :[key]="value"></button>

<!-- 內聯字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

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

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

<!-- 綁定對象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 綁定。“prop” 必須在子組件中已聲明。 -->
<MyComponent :prop="someThing" />

<!-- 傳遞子父組件共有的 prop -->
<MyComponent v-bind="$props" />

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

3. v-if

說明： 基于表達式值的真假性，來條件性地渲染元素或者模板片段。

<h3 v-if="isShow">哈哈哈哈</h3>

4. v-else

說明： 表示 v-if 或 v-if / v-else-if 鏈式調用的“else 塊”。

<h3 v-if="isShow">Coder</h3>
<h3 v-else>Bin</h3>

ishow 為 true 顯示 Coder，反之顯示 Bin

5. v-else-if

說明： 表示 v-if 的“else if 塊”。可以進行鏈式調用。

<template id="my-app">
  <input type="text" v-model="score">
  <h3 v-if="score > 90">優秀</h3>
  <h3 v-else-if="score > 60">良好</h3>
  <h3 v-else>不及格</h3>
</template>

v-model 后面會說明

6. v-show

說明：基于表達式值的真假性，來改變元素的可見性。

詳細描述：v-show 通過設置內聯樣式的 display CSS 屬性來工作，當元素可見時將使用初始 display 值。當條件改變時，也會觸發過渡效果。

  <template id="my-app">
    <h3 v-show="isShow">哈哈哈哈</h3>
  </template>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          isShow: true
        }
      }
    }
    Vue.createApp(App).mount('#app');
  </script>

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

7. v-model

說明： 在表單輸入元素或組件上創建雙向綁定。

僅限： <input>、<select>、 <textarea>、components

修飾符：

• .lazy ——監聽 change 事件而不是 input

• .number ——將輸入的合法符串轉為數字

• .trim ——移除輸入內容兩端空格

基本使用：

  <template id="my-app">
    <!-- 1.v-bind value的綁定 2.監聽input事件, 更新message的值 -->
    <!-- <input type="text" :value="message" @input="inputChange"> -->

    <input type="text" v-model="message">
    <h3>{{message}}</h3>
  </template>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          message: "Hello World"
        }
      },
      methods: {
        inputChange(event) {
          this.message = event.target.value;
        }
      }
    }
    Vue.createApp(App).mount('#app');

綁定其他表單：

  <template id="my-app">
    <!-- 1.綁定textarea -->
    <label for="intro">
      自我介紹
      <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
    </label>
    <h3>intro: {{intro}}</h3>

    <!-- 2.checkbox -->
    <!-- 2.1.單選框 -->
    <label for="agree">
      <input id="agree" type="checkbox" v-model="isAgree"> 同意協議
    </label>
    <h3>isAgree: {{isAgree}}</h3>

    <!-- 2.2.多選框 -->
    <span>你的愛好: </span>
    <label for="basketball">
      <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 籃球
    </label>
    <label for="football">
      <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
    </label>
    <label for="tennis">
      <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 網球
    </label>
    <h3>hobbies: {{hobbies}}</h3>

    <!-- 3.radio -->
    <span>你的愛好: </span>
    <label for="male">
      <input id="male" type="radio" v-model="gender" value="male">男
    </label>
    <label for="female">
      <input id="female" type="radio" v-model="gender" value="female">女
    </label>
    <h3>gender: {{gender}}</h3>

    <!-- 4.select -->
    <span>喜歡的水果: </span>
    <select v-model="fruit" multiple size="2">
      <option value="apple">蘋果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h3>fruit: {{fruit}}</h3>
  </template>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          intro: "Hello World",
          isAgree: false,
          hobbies: ["basketball"],
          gender: "",
          fruit: "orange"
        }
      },
      methods: {
        commitForm() {
          axios
        }
      }
    }

    Vue.createApp(App).mount('#app');
  </script>

v-model修飾符的使用

 <template id="my-app">
    <!-- 1.lazy修飾符 -->
    <!-- <input type="text" v-model.lazy="message"> -->

    <!-- 2.number修飾符 -->
    <!-- <input type="text" v-model.number="message">
    <h3>{{message}}</h3>
    <button @click="showType">查看類型</button> -->

    <!-- 3.trim修飾符 -->
    <input type="text" v-model.trim="message">
    <button @click="showResult">查看結果</button>
  </template>

  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          message: "Hello World"
        }
      },
      methods: {
        showType() {
          console.log(this.message, typeof this.message);
        },
        showResult() {
          console.log(this.message);
        }
      }
    }

    Vue.createApp(App).mount('#app');
  </script>

8. v-for

說明： 基于原始數據多次渲染元素或模板塊。

詳細描述：

指令值必須使用特殊語法 alias in expression 為正在迭代的元素提供一個別名：

<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 的默認方式是嘗試就地更新元素而不移動它們。要強制其重新排序元素，你需要用特殊 attribute key 來提供一個排序提示：

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

9. v-slot

說明： 用于聲明具名插槽或是期望接收 props 的作用域插槽。

縮寫： #

參數：插槽名 (可選，默認是 default)

僅限：

• <template>

• components (用于帶有 prop 的單個默認插槽)

示例

<!-- 具名插槽 -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

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

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

<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- 接收 prop 的默認插槽，并解構 -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

10. v-text

說明： 更新元素的文本內容。

詳細描述： v-text 通過設置元素的 textContent 屬性來工作，因此它將覆蓋元素中所有現有的內容。如果你需要更新 textContent 的部分，應該使用 mustache interpolations 代替。

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

11. v-html

說明： 更新元素的 innerHTML。

詳細描述： v-html 的內容直接作為普通 HTML 插入—— Vue 模板語法是不會被解析的。如果你發現自己正打算用 v-html 來編寫模板，不如重新想想怎么使用組件來代替。

安全說明: 在你的站點上動態渲染任意的 HTML 是非常危險的，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要將用戶提供的內容作為插值

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

12. v-pre

說明： 跳過該元素及其所有子元素的編譯。

詳細描述：元素內具有 v-pre，所有 Vue 模板語法都會被保留并按原樣渲染。最常見的用例就是顯示原始雙大括號標簽及內容。

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

13. v-once

說明： 跳過該元素及其所有子元素的編譯。

詳細描述： 在隨后的重新渲染，元素/組件及其所有子項將被當作靜態內容并跳過渲染。這可以用來優化更新時的性能。

<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 帶有子元素的元素 -->
<div v-once>
  <h2>comment</h2>
  <p>{{msg}}</p>
</div>
<!-- 組件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

14. v-cloak

說明： 用于隱藏尚未完成編譯的 DOM 模板。

詳細描述：該指令只在沒有構建步驟的環境下需要使用。

• 當使用直接在 DOM 中書寫的模板時，可能會出現一種叫做“未編譯模板閃現”的情況：用戶可能先看到的是還沒編譯完成的雙大括號標簽，直到掛載的組件將它們替換為實際渲染的內容。

• v-cloak 會保留在所綁定的元素上，直到相關組件實例被掛載后才移除。配合像 [v-cloak] { display: none } 這樣的 CSS 規則，它可以在組件編譯完畢前隱藏原始模板。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

關于“Vue中的常用內置指令有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中的常用內置指令有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。