Vue中常見指令彙總

Vue指令

• 解釋：是指帶有 v- 前綴的特殊屬性
• 作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM

---

1、v-html

 解釋：更新dom對象的innerHTML

<div id="box">
    <div v-html="str"></div>
</div>

<script>
var vm = new Vue({
    el: "#app",
    data: {        
        str: "<h1>hello world</h1>",
    },
})
</script>

2、v-text

解釋：更新dom對象的textContent

    <div id="app">
        <div v-text="str"></div>
    
    </div>
    
    <script>    
        var vm = new Vue({
          el: "#app",
          data: {
            str: "123",
          },
        })    
    </script>

3、v-bind

解釋：表達式值改變時，dom被響應式地及時更新

語法：v-bind:title="msg"

    <div id="app">
        <div v-bind:id="btnid"></div>
    
    </div>
    
    <script>    
        var vm = new Vue({
          el: "#app",
          data: {
            btnid: "btn-update"
          },
        })    
    </script>

4、v-once

解釋：僅渲染一次

    <div id="app">
        <div v-once>this will never change:{{message}}</div>
    
    </div>
    
    <script>    
        var vm = new Vue({
          el: "#app",
          data: {
            message: "hello world"
          },
        })    
    </script>

5、v-if、v-else-if和v-else

解釋：根據表達式的值的真假條件，銷燬或重建元素

  <div id="app">
    <template v-if="type==='a'">
      <h1>A-1</h1>
      <h1>A-2</h1>
      <h1>A-3</h1>
    </template>
    <div v-else-if="type==='b'">b</div>
    <div v-else>other</div>
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        type: 'a'
      }
    })
  </script>

6、v-show

解釋：根據表達式的真假值，切換元素的 display 屬性

默認情況下表達式值爲false

  <div id="app">
    <div v-show="show">
      這是v-show的內容
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        show: ''
      },
    })

7、v-for

解釋：循環，用於多次渲染

<!-- item 爲值，key 爲鍵，index 爲索引 -->


  <div id="app">
    <ul>
      <li v-for="(item,index) in cities" v-bind:key="item.id">
        {{item.name}}-{{index}}
      </li>
    </ul>
    <hr>

    <ul>
      <li v-for="(value,key,index) in user">
        {{value}}-{{key}}-{{index}}
      </li>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        cities: [{ name: '北京', id: 1 }, { name: "天津", id: 2 }, { name: "上海", id: 3 }],
        user: {
          username: 'yuki',
          age: 20,
          address: 'beijing china'
        },
        show: true
      }
    })

  </script>

8、v-on

解釋：綁定事件

語法：v-on:click="say" or v-on:click="say('參數', $event)"

簡寫：@click="say"

說明：綁定的事件定義在methods

 <div id="app">
    <button v-on:click="decrement(1)">-</button>
    <h1>{{count}}</h1>
    <button @click="increment($event,1)">+</button>
  </div>

  <script>

    var vm = new Vue({
      el: "#app",
      data: {
        count: 0
      },
      methods: {
        increment(e, num) {
          this.count += num;
          console.log(e.target)
        },
        decrement(num) {
          this.count -= num;
        }
      }
    })

補充：事件修飾符

• .stop 阻止冒泡，調用 event.stopPropagation()
• .prevent 阻止默認行爲，調用 event.preventDefault()
• .capture 添加事件偵聽器時使用事件捕獲模式
• .self 只當事件在該元素本身（比如不是子元素）觸發時，纔會觸發事件
• .once 事件只觸發一次

9、v-model

解釋：在表單元素上創建雙向數據綁定

 <div id="app">
     username: <input type="text" v-model="user.username">
  </div>

  <script>

    var vm = new Vue({
      el: "#app",
      data: {
        user: {
          username: ''    
        }
      },

    })

10、v-pre

解釋：vue會跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

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