1、VUE基礎回顧1

1.v-if和v-show

　　v-if 和v-show均可以顯示和隱藏元素；
　區別：（1）v-if初始值爲false那麼這個元素不會被渲染 ，v-show無論初始值爲什麼值都會被渲染
　　　　（2）v-if是控制DOM元素是否插入，v-show是控制css的display屬性
　　　　（3）v-if適合隱藏還沒有加載的內容或切換顯示與隱藏頻率較低的地方，v-show反之;

　　此外還有兩個條件語句和v-if有關：v-else-if ,v-else

1 <div v-if="state==='loading'">加載中。。。</div>
2 <div v-else-if="state==='errr'">出錯了。。。</div>
3 <div v-else>個人內容</div>

　　當根據state的值顯示不一樣的內容

2.v-for循環

　　直接看示例：

<ul>
      <li v-for="（item，index） in state " :key="item.index">{{item.content}}</li>
</ul>

　　該指令可遍歷對象也可遍歷數組，key爲li的惟一標識符，可保證高效渲染，還能夠保證標籤順序不會錯亂；

3.v-bind屬性綁定，簡寫 「 : 」

　　示例　　　

<button :type="test"></button>

　　該指令能夠接收參數，用於將一個值綁定到一個HTML的屬性上。上例爲button的type參數綁定了一個變量test，該值在data中能夠爲任何button類型，這個指令對於disabled和checked一樣有效，就看爲false仍是true，斷定是否生效

4.v-on事件綁定，簡寫 '@事件名'

　　該指令將事件綁定到元素上，將事件名稱做爲參數，將事件偵聽器做爲傳入值 

<button v-on:click="counter++"></button>
    <!-- 按鈕單擊counter的值加1 -->
    <button v-on:click="counter"></button>
    <!-- counter也能夠做爲方法名，調用執行該函數，若是加()可在其中傳遞參數 -->

　　事件修飾符

　　　　能夠根據事件修飾符來修改事件偵聽器或者事件自己   例 @click.self

　　　　　　阻止執行事件的默認行爲  .prevent修飾符   例如阻止a標籤的默認跳轉
　　　　　　阻止事件繼續傳播，避免在父級元素觸發   .stop
　　　　　　只讓事件執行一次   .once 

　　　　　　事件捕獲，事件會傳遞到當前元素的下級元素前觸發（而在冒泡模式中，事件會先在當前元素上觸發，而後向上冒泡）  .captrue
　　　　　　只讓事件在當前元素觸發，而不是在子元素上   .self

　　　　　　也能夠只設置事件名+修飾符，修飾符能夠進行鏈式操做  例如該例子會阻止單擊事件沿DOM樹向下傳遞，而且只有觸發第一次有效，@click.stop.captrue.once

　　綁定鍵盤事件  @keyup,按下會觸發事件，@keyup(test) 在test函數中能夠接收參數e,e爲鍵盤上的任何按鈕表明的值，強大的vue給咱們了修飾符，修飾符能夠做爲按鍵值做爲修飾符@keyup.27表明esc鍵，也爲經常使用的按鈕提供別名.enter,.tab等等

　　　　　　.exact能夠指定按鍵觸發 @keydow.enter.exact  只有enter件可觸發