vue 原生指令

1. v-bind

v-bind:id縮寫為:id

2. v-text 資料繫結

與{{}}相似，但是沒有{{}}靈活，比如實現

<div>Text: {{text}}</div>

使用v-text需要用字串拼接

<div v-text="'Text:' + text"></div>

3. v-html 能解析含有標籤的程式碼片段

4. v-show 是否顯示某個節點，原理就是display：none

5. v-if

v-if和v-show相似，為false時，dom中移除該節點，如果頻繁操作節點，建議使用v-show，新增刪除節點會導致頁面的重排與重繪，影響效能。與之相對應的有v-else v-else-if

6. v-for 遍歷陣列與物件

new Vue({
  el: '#root',
  template: `<div>
    <ul>
      <li v-for="(value, key, index) in obj">{{value}} : {{key}}: {{index}}</li>
    </ul>
  </div>`,
  data () {
    return {
      obj: {
        a: '123',
        b: '456',
        c: '789'
      }
    }
  }
})
 

123 : a : 0
456 : b : 1
789 : c : 2

7. v-on 事件繫結 v-on:click => @click

8. v-model 一般在input上使用

• 在checkbox上使用:value

new Vue({
  el: '#root',
  template: `<div>
    <input type="checkbox" :value="1" v-model="arr" />
    <input type="checkbox" :value="2" v-model="arr" />
    <input type
 
="checkbox" :value="2" v-model="arr" />
  </div>`,
  data () {
    return {
      arr: [2, 3]
    }
  }
})

也可用於radio上

    <input type="radio" value="one" v-model="picked" />
    <input type="radio" value="two" v-model="picked" />

• v-model 可以繫結為number型別

<input type="text" v-model.number="text" />

• v-model 去空格

<input type="text" v-model.trim="text" />

• lazy 相當於onchange事件

<input type="text" v-model.lazy="text" />

9. v-pre 直接輸出內容

10. v-cloak 瀏覽器執行vue程式碼之前，頁面會出現“{{}}”，使用此指令可以隱藏“{{}}”。

11. v-once 只監聽一次