Vue中的v-指令使用小結
目錄
- 前言
- 一、.常用的v-指令
- 1、v-html 指令
- 2、v-text 指令
- 3、v-once指令
- 4、v-if 指令
- 5、v-show指令
- 6、v-on指令
- 7、v-for指令
- 8、v-bind指令
- 9、v-model指令
- 二、Vue.js不常用的v-指令
- 1、v-pre指令
- 2、v-cloak指令
- 三、VuyKsqAGqFne.js的自定義指令
- 1、自定義的v-focus指令
- 2、自定義的物件字面量指令
- 最後
前言
在前端Vue.js 開發的時候，使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規範的瀏覽器和 HTML 解析器解析。 開發者比較熟悉的Vue.js 的資料繫結常用的方式就是使用“Mustache”語法 (雙大括號) 的文字插值，Mustache 標籤將會被替代為對應資料物件上 msg property 的值。無論何時何地，繫結的資料物件上 msg property 發生了改變，插值處的內容都會跟著更新改變，通過使用v-once指令也能執行一次性地插值，當資料改變時插值處的內容不會更新。本篇博文就來分享一下關於v-指令使用的相關內容。
一、Vue.js常用的v-指令
1、v-html 指令
v-html 指令用於輸出 html 程式碼的，具體使用如下所示：
<div class="email-content">
<p v-html="templatePack"></p> //templatePack是html程式碼路徑
</div>
2、v-text 指令
v-text 指令是用於輸出文字的，具體使用如下所示：
<thead>
<th class="table-header-th" v-for="(cell,colIndex) in header" :key="colIndex">
<span class="table-header" v-text="cell.value"></span> //輸出cell.value的值
</th>
3、v-once指令
通過使用v-once指令，一次性地插值，當資料改變時，插值處的內容不會更新，具體使用如下所示：
<span v-once> {{ msg }}</span> //msg的值不變
4、v-if 指令
v-if 指令是實現條件渲染，插入或者移除元素(true插入,false移除)，具體使用如下圖所示：
v-else指令保證同級節點存在v-if || v-else-if，搭配v-if使用的，必須緊跟在v-if或者v-else-if後面，否則不起作用，具體使用如下圖所示：
注意：v-if和v-else 只會不能並存，只能存在其一。
v-else-if指令是充當v-if的else-if塊，可以鏈式的使用多次，可以在標籤中更加方便的實現switch語句的功能。
5、v-show指令
v-show指令是用來隱藏或者顯示元素的，具體使用如下所示：
<van-loading class="loading-bg" type="spinner" size="24px" v-show="httpLoading"/> //根據httpLoading的bool值來判斷是否顯示
6、v-on指令
v-on指令是用來進行事件繫結的， 可用@來代替，具體使用如下所示：
<div class="header-bg" @click="toInterviewResume"> //給div標籤繫結點選事件，使用@來代替v-on
7、v-for指令
v-for指令實現的是迴圈語法，也就是for迴圈的功能，具體使用如下所示：
8、v-bind指令
v-bind指令是用來實現屬性繫結的，它可以簡寫，具體使用如下所示：
<img v-bind:src="imgSrc”> //v-bind 未簡寫 <img :src="imgSrc"> //v-bind 簡寫
9、v-model指令
v-model指令是用來實現雙向資料繫結的，具體使用如下所示：
二、Vue.js不常用的v-指令
1、v-pre指令
v-pre指令是用來不解析資料的，具體使用如下所示：
<span class="table-header" v-yKsqAGqFnpre>{{hello world}}</span> //顯示效果為：{{hello world}}
2、v-cloak指令
v-cloak指令是：vue解析前，v-cloak會存在於頁面；vue解析完成 ，v-cloak消失。它能夠解決插值表示式閃爍的問題，具體使用如下所示：
//樣式
[v-cloak]{
display:none;
color:red;
}
....
<span v-cloak>Loading…</span>
三、Vue.js的自定義指令
除了上面的核心功能預設內建的指令，Vue.js也允許註冊自定義指令。在 Vue2.0 中，程式碼複用和抽象的主要形式是元件，但是有的情況下，仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
1、自定義的v-focus指令
場景：當頁面載入時，讓輸入框獲得焦點。
只要在開啟這個頁面後還沒點選過任何內容的時候，這個輸入框就應當還是處於聚焦狀態，這裡使用v-focus指令來實現該需求，具體使用如下所示：
// 註冊全域性自定義指令 `v-focus`
Vue.directive('focus',{
// 當被繫結的元素將要插入到 DOM 中時
inserted: function (el) {
// 聚焦對應的元素
el.focus();
}
});
//在輸入框使用的地方使用上述自定義指令
<input v-focus>
2、自定義的物件字面量指令
場景：如果指令需要有多個值，可傳入一個 物件字面量，但是該指令函式能夠接受所有合法的 Script 表示式。具體使用如下所示：
<span v-demo="{ color: ‘red',text: 'hello world!' }"></span>
Vue.directive('demo',function (el,binding) { //
console.log(binding.value.color); // 輸出結果“red”
console.log(binding.value.text); //輸出結果 "hello world!"
});
最後
通過上面介紹的v-指令的各種使用場景，在Vue.js開發中的使用就遊刃有餘了，這也是在開發過程中必用的功能，尤其是對於初級開發者來說，更應該掌握這種操作場景的使用，這裡不再贅述。
到此這篇關於Vue中的v-指令使用的彙總的文章就介紹到這了,更多相關Vue中v-指令使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！