1.指令

1.1內部指令

基礎指令：v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-bind , v-ref , v-pre , v-cloak , v-if

1.1 v-if

根據表達式的值在DOM中生成或者移除一個元素。v-if 賦值為false,對應的元素會從DOM中移除，否則對應元素的一個克隆將會被重新插入DOM中，如果切換多個元素，則可以把<template>元素當成包裝元素，並在其上使用v-if，最終的渲染結果不會包含它。

<p v-if="ok"></p>

<template v-if="ok">
    <h1></h1>
    <span></span>
    <p></p>
</template>
 

1.2 v-show

根據表達式的值來顯示或者隱藏HTML元素，當v-show的值為false ,元素被隱藏，DOM上有內聯樣式，style="display:none", v-show 不支持 <template> 語法

註意：一般v-if 有更高的切換消耗，v-show有更高的初始渲染消耗，因此，如果頻繁切換，則使用v-show交換，如果在運行時條件不大可能改變，則使用v-if較好

1.3 v-else

必須跟著v-if 或者v-show，v-show 後有else 會出現 優先級的問題，所有不要在其後用v-else ,用一個v-show 代替

<h1 v-show="test"><h1>
<p v-show="!test"></p>
 

1.4 v-model

用來用在input,textarea,text,checkbox,raido等表單控件元素上創建雙向數據綁定。根據控件類型v-model自動選取正確的方法更新元素。
v-model 指令後面可以添加多個參數（number, lazy, debounce）

• number
  如果用戶想將用戶的輸入自動轉換為number類型（如果原值的轉換結果為NaN，則返回原值），則可以添加一個number特性
• lazy
  將數據改在change事件中發生

<input v-model="msg" lazy /> 
{{msg}} //msg 是在change事件後才改變的
 

• debounce
  設置一個最小的延時，在每次敲擊之後延時同步輸入框的值和數據，如果每次更新都要進行高耗操作（例如在input中輸入內容時要發送ajax請求），那麽它較為有用，

<input v-model="msg" debounce="5000" /> 
{{msg}} //內容在5000ms之後才發生改變

【vue 權威指南】 學習筆記 二