Vue內置指令的使用

v-model（數據綁定）

v-model經常使用於表單數據的雙向綁定，它本質上是一個語法糖。它主要的有兩種應用：

• 在文本框、多行文本、input的下拉框、單選按鈕、複選框中的應用

  <div id="app">
    	<input v-model="test">
    	<!-- <input :value="test" @input="test= $event.target.value"> -->
    	<!--語法糖-->
    	<p>{{ test}}</p>
    </div>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			test: '歡迎來到俠課島'
    		}
    	});
    </script>

  下拉框：

  <div id="app">
      	<select v-model="selected">
      		<option value="設計">Phtotshop</option>
      		<option value="編程">programming</option>
      		<option value="插畫">Illustration</option>
      	</select>
      	<span>Selected: {{ selected }}</span>
      </div>
      <script>
      	new Vue({
      		el: '#app',
      		data: {
      			selected: ''
      		}
      	});
      </script>

  單選按鈕：

  <div id="app">
      	<input type="radio" id="man" value="男" v-model="picked">
      	<label for="man">男</label>
      	<br>
      	<input type="radio" id="woman" value="女" v-model="picked">
      	<label for="woman">女</label>
      	<br>
      	<input type="radio" id="other" value="其餘" v-model="picked">
      	<label for="other">其餘</label>
      	<br>
      	<span>Picked: {{ picked }}</span>
      </div>
      <script>
      	new Vue({
      		el: '#app',
      		data: {
      			picked: ''
      		}
      	})
      </script>

  複選框：

  <div id="app">
      	<input type="checkbox" id="one" value="課程一e" v-model.lazy="checkedNames">
      	<label for="one">選項一</label>
      	<input type="checkbox" id="two" value="課程二" v-model.lazy="checkedNames">
      	<label for="two">選項二</label>
      	<input type="checkbox" id="three" value="課程三" v-model.lazy="checkedNames">
      	<label for="three">選項三</label>
      	<br>
      	<span>Checked names: {{ checkedNames }}</span>
      </div>
      <script>
      	new Vue({
      		el: '#app',
      		data: {
      			checkedNames: []
      		}
      	})
      </script>

• 也能夠和.lazy、.trim、.number這些修飾符一塊兒使用 .lazy

  <input v-model.lazy="test" >

  .number，自動將用戶的輸入值轉爲數值類型

  <input v-model.number="test" type="number">

  .trim，自動過濾用戶輸入的首尾空白字符

  <input v-model.trim="test" >

v-for（循環）

格式： v-for=「字段名 in(of) 數組 or json

<div id="main">
        <p>{{ message }}</p>
        <ul>
          <li v-for="(item,index) in fruit">{{ item }} {{ index }}</li>
        </ul>
    </div>
    <script>
        new Vue({
          el: '#main',
          data: {
            message: 'Welcome XKD!',
            fruit: [
              'Apple',
              'Grape',
              'Pitaya',
              'Banana',
              'watermelon',
              'Pomegranate'
            ]
          }
        })
    </script>

v-show 和 v-if（顯示與隱藏）、v-else-if、v-else

v-show 經過值來判斷是否加載並顯示；

v-if 經過值來判斷是否加載；

v-else-if ，充當 v-if 的「else-if 塊」，能夠連續使用；

v-else ，表示 v-if 的「else 塊」 ，必須連用，不然無效不會識別。

v-show 和 v-if二者區別在於：

• v-if 控制元素隱藏的時候，它會刪除dom節點，而v-show並不會，v-if還能夠和v-else-if 和 v-else，這二者是必須和v-if連用，不能單獨使用。
• 通常來講， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。 若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

v-show：

<div v-show="isShow">我只是用來控制 display 的屬性值</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: true
    		}
    	});
    </script>

v-if：

<div id="main">
    	<div v-if="isShow">顯示或隱藏</div>
    </div>
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: fasle
    		}
    	});
    </script>

v-else-if：

<div v-if="type === 'A'">程序員</div>
    <div v-else-if="type === 'B'">設計師</div>
    <div v-else-if="type === 'C'">運營者</div>
    <div v-else>互聯網工做人</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			type: 'A'
    		}
    	});
    </script>

v-else：

<div v-if="isTrue">俠課島</div>
    <div v-else>仍是俠課島</div>
    
    <script>
    	var vm = new Vue({
            el: '#main',
            data: {
                isTrue: true
            }
    	})
    </script>

v-bind（動態綁定）

及時對頁面的數據進行更新修改。

• v-bind:id 簡寫爲 :id
• v-bind:disabled 簡寫爲 :disabled
• v-bind:href 簡寫爲 :href
• v-on:click 簡寫爲 @ click

v-on（綁定事件）

指令綁定事件後，就會監聽相應的事件。

v-on:click：

<div id="main">
        <h3>已點擊 {{count}} 次</h3>
        <button @click="count++">Click Me!</button>
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
            count: 0
          }
        });
    </script>

v-on:keyup：先顯示值，再彈出層

<div id="main">
    	<input v-on:keyup.13="keyup" type="text">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            // enterClick: function () {
            //   console.log("enterClick");
            // }
            keyup(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-on:keydown：在框中輸入先彈出層，再顯示輸入的值

<div id="main">
    	<input v-on:keydown="keydown">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            keydown(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-text 和 v-html（解析文本）

v-text：

<span v-text="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

無論是什麼，全都解析成文本，裏面的HTML標籤也所有轉義掉：

v-html：

<span v-html="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

v-bind:class

• 對象：{ red:ifAbledRed }
• 三目運算符：ifAbledRed ? "red" : "blue"
• 數組：[{red:"ifAbledRed"},{blue:"ifAbledBlue"}]

v-once

只渲染一次，再也不進行渲染。

<p v-once>{{ message }}</p>

v-cloak（防止閃爍）

v-cloak通常是配合 [v-cloak] {display: none; }css 一塊兒使用的。

<p v-cloak>{{ message }}</p>

下面是一個閃爍的截圖代碼，當咱們給以下紅色代碼塊外加一個setTimeout時間延遲時，而後再去執行咱們會發如今網頁上什麼都沒有，會有一個時間的停留，所以提供了一個v-cloak的方法來解決這個問題。

v-pre

原位輸出標籤內部的元素。