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
原位輸出標籤內部的元素。