中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2022-09-07 09:38:18 來源:億速云 閱讀:167 作者:iii 欄目:編程語言

這篇文章主要介紹了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+

用途:

  • 當用于綁定 classstyle 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-ifv-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中的常用內置指令有哪些”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

微山县| 莱芜市| 拜泉县| 双峰县| 绩溪县| 文安县| 乐山市| 南城县| 同仁县| 沭阳县| 岳阳县| 达尔| 天津市| 东阿县| 来宾市| 富平县| 汝阳县| 嵩明县| 隆化县| 和顺县| 迁西县| 武威市| 乌兰县| 自贡市| 宜章县| 宁都县| 搜索| 迭部县| 凤凰县| 泗阳县| 金山区| 库尔勒市| 越西县| 邢台县| 乃东县| 新建县| 西畴县| 梨树县| 长葛市| 武鸣县| 宾川县|