Vue 內部指令

指令（ Directives ）是 Vue 模板中最常用的一項功能，它帶有前綴 v－，能幫我們快速完成DOM操作，循環(huán)渲染，顯示和隱藏。

基本指令

v-text

v-text 解析文本，更新元素的 textContent 。
用 {{}} 在 HTML中輸出 data的值時， 有一個問題： 當網(wǎng)速慢或者JavaScript出錯時，會暴露 {{xxx}}，而 v-text 可以避免這個問題

<span v-text="msg"></span>

v-html

v-html 解析 html ， 更新元素的 innerHTML。

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

v-bind

v-bind通常用來動態(tài)綁定屬性的，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值"

   <div v-bind:class="className">v-bind綁定 class</div>

v-bind 可以縮寫為 : ，所以上面的也可以寫作:

   <div :class="className">v-bind綁定 class</div>

v-bind 應用

綁定 class
1. 變量語法

v-bind:class = "變量"
這里的變量的值，通常是在css定義好的類名

2. 對象語法

v-bind:class = {classname1：boolean，classname2：boolean}
對象的鍵是類名，值是布爾值。

  • 這里的classname1，classname2其實就是樣式表中的類名
  • 這里的boolean通常是一個變量，也可以是常量、計算屬性等，這種方法也是綁定class最常用的方式。

demo

當 class 的表達式過長或邏輯復雜時，可以綁定一個計算屬性，這是一種很友好和常見的用法 ： demo

3. 數(shù)組語法

把一個數(shù)組傳給 v-bind:class，以應用一個 class 列表，在數(shù)組語法中也可以使用對象語法： demo

綁定內聯(lián)樣式

demo

v-on

v-on 用來綁定事件監(jiān)聽器， 它的縮寫是 @

  <div id="app">
    <span>{{count}}</span>
    <button v-on:click="add">add</button>
  </div>
  <script>
    var app = new Vue({
       el: "#app",
       data: {
         count: 0
        },
       methods: {
       //  方法寫在 Vue 實例的 methods 屬性內，并且是函數(shù)形式
        add() {
         this.count++;
// 函數(shù)內的 this 指向的是當前 Vue 實例本身，因此可以直接使用 this.xxx 的形式來訪問或修改數(shù)據(jù)
      }
    }
   });
  </script>

v-- cloak

v-- cloak 在 Vue 渲染完指定的整個DOM后才進行顯示， 一般與display：none進行結合使用，解決初始化慢導致的頁面閃動問題。

[v-cloak] {
  display: none;
}

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

v--once

只渲染元素和組件一次。
渲染完成后，元素/組件及其所有子節(jié)點將被視為靜態(tài)內容并跳過，可以用于優(yōu)化更新性能。

  <div id="app">
    <p>這里沒有使用 v-once :{{onceData}}</p>
    <p v-once>這里使用了 v-once :{{onceData}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        onceData: '12344'
      }
    })
  </script>

在控制臺輸入app.onceData = 90看看會發(fā)生什么~~

條件渲染指令

v--if, v--else--if ,v--else

    <div v-if="type === 'name'">
      用戶名：
      <input type="text" placeholder="請輸入用戶名">
    </div>
    <div v-else>
      密碼：
      <input type="text" placeholder="請輸入密碼">
    </div>
    <button v-on:click="changeType">點擊切換</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
       type: 'name'
      },
      methods: {
        changeType: function () {
          this.type = (this.type === 'name' ? 'password' : 'name')
        }
      }
    })
  </script>

v-if 的弊端

在上面的例子中，在輸入框中輸入任何值，點擊切換后，發(fā)現(xiàn)我們輸入的值仍在.....
這是因為： Vue 在渲染元素時 ，出于效率考慮，會盡可能地復用已有的元素而非重新渲染， 因此會出現(xiàn)烏龍，只會渲染變化的元素，也就是說，input元素被復用了（僅僅是替換了它的 placeholder）。

針對 v-if 的弊端的解決辦法 --- 用 key 管理可復用的元素

Vue 提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可。

    <div v-if="type === 'name'">
      用戶名：
      <input type="text" placeholder="請輸入用戶名" key= "name">
      <!-- 加上唯一的key值 -->
    </div>
    <div v-else>
      密碼：
      <input type="text" placeholder="請輸入密碼" key = "password">
       <!-- 加上唯一的key值 -->
    </div>
    <button v-on:click="changeType">點擊切換</button>

v--show

v-show 實際上是改變display 屬性，帶有 v-show 的元素始終會被渲染并保留在 DOM 中。

  <div id="app">
   <p v-show="visible">v-show 實際上只是簡單地切換元素的 CSS 屬性 display</p>
    <button @click= "changeView">點擊切換</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
       visible: true
      },
      methods: {
        changeView: function() {
          this.visible = !this.visible 
        }
      }
    })
  </script>

v-if 和v-show 比較

  • v-if 有更高的切換開銷 —— 判斷是否加載DOM，需要就渲染，不需要時移除）
  • v-show有更高的初始渲染開銷 —— 始終保留在DOM中，切換CSS display

列表渲染指令v--for

當需要將一個數(shù)組遍歷或枚舉一個對象屬性的時候循環(huán)顯示時，就會用到列表渲染指令 v--for。

用法： v-for 寫在要遍歷的元素上，類似于下面這樣：

 <li v-for="item in items">
    {{ item.message }}
  </li>

當 v-if 和 v-for一起使用時。v-for 比 v-if 優(yōu)先級更高

遍歷一個數(shù)組

參數(shù)： item 、index(可選）

  <div id="app">
    <ul>
      <li v-for="(item,index) in myBooks"> {{index}} -- {{item.bookname}} -- {{item.author}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
       myBooks: [
         {bookname: '長腿叔叔',author:'簡·韋伯斯特'},
         {bookname: '我們仨',author:'楊絳'},
         {bookname: '島上書店',author:'美）加布瑞埃拉·澤文'}
       ]
      }
    })
  </script>

遍歷一個對象

參數(shù)： value、 key（可選） 、index（可選）
注意： 順序不可改變 ，必須是 value,key,index 這樣的順序

  <div id="app">
    <ul>
      <li v-for="(value,key,index) in obj">
       {{index}} - {{key}} - {{value}}
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
       obj: {
         book: '如何閱讀一本書',
         learning: 'vue'
        }
      }
    })
  </script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容