Vue中一些常用指令的用法舉例

1. 文本插值：{{ }} Mustache

<div id="app">
{{ message }}
</div>

2. DOM屬性綁定： v-bind

<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鍾查看此處動態綁定的提示信息！
</span>
</div>

3. 指令綁定一個事件監聽器：v-on 

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉消息</button>
</div>

4. 實現表單輸入和應用狀態之間的雙向綁定：v-model

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

5. 控制切換一個元素的顯示：v-if 和 v-else

<div id="app-3">
  <p v-if="seen">現在你看到我了</p>
</div>

6. 列表渲染：v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})

用 v-for 把一個數組對應為一組元素

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。v-for 還支持一個可選的第二個參數為當前項的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

一個對象的 v-for

也可以用 v-for 通過一個對象的屬性來迭代。比如對象里的屬性值value

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

還可以傳入第二個參數key 和第三個參數 index，順序不能亂，否則結果也會亂

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

 

結果：

0. firstName: John

1. lastName: Doe

2. age: 30

 

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一  key 屬性。理想的  key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的  track-by ，但它的工作方式類似於一個屬性，所以你需要用  v-bind 來綁定動態值 (在這里使用簡寫)：

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>

建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

7. 根據條件展示元素：v-show

<h1 v-show="ok">Hello!</h1>

帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。

注意，v-show 不支持 <template> 語法，也不支持 v-else。

8. v-if vs v-show

v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

9.v-if 與 v-for 一起使用

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。