1.v-if/v-else

v-if指令可以完全根據表示式的值在DOM中生成或移除一個元素。v-else必須跟著v-if，充當else功能。

<div id="example">
		<p v-if="greeting">Hello</p>
		<p v-else="greeting">Hi</p>
		<template v-if="ok">
			<h1>Tiele</h1>
			<p>Paragraph</p>
		</template>
</div>

var exampleVM2=new Vue({
			el: '#example',
			data: {
				greeting: false,
				ok: true,
			}
		})
 

可以看到包裝元素<template>最終是不會渲染出來，它可以用來包裝多個需要切換元素。而else內容最終也不會渲染到DOM中

2.v-show

v-show指令是根據表示式的值來顯示或者隱藏HTML元素內容的。

<div id="example2">
			<p v-show="greeting">Hello!</p>
			<p v-show="!greeting">Hi</p>
</div>

var example=new Vue({
			el: '#example2',
			data: {
				greeting: true
				
			}
		})
 

將v-show用在指令上時，因為指令的優先順序v-else會出現問題，所以可以通過用另一個v-show指令代替v-else，如上。

 一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁的切換，則使用v-show較好；如果執行時條件不大可能改變，則使用v-if較好

3.v-for

我們可以使用v-for指令基於源資料重複渲染元素

<div id="demo">
		<ul>
			<li v-for="item in items" class="item-{{$index}}">
				{{$index}} -{{parentMessage}} {{item.msg}}
			</li>
		</ul>
	</div>
 

var demo= new Vue({
			el: '#demo',
			data: {
				parentMessage: '滴滴',
				items:[
                   {msg: '順風車'},
                   {msg: '專車'}
				]

			}
		})

$index可以用來呈現相應的陣列索引，注意需要最新版本的Vue才有此功能。

4.v-on

v-on指令用於繫結事件監聽器。

v-on後面不僅可以跟引數，還可以增加修飾符：

.stop -----呼叫event.stopPropagation()，停止冒泡

.prevent-----呼叫event.preventFefault()，阻止預設行為

.capture-----新增事件監聽器時使用capture模式

.self------只當時間是從監聽器繫結的元素本身觸發時才觸發回撥

<div id="example">
		<button @click="toggleShow">{{msg}}</button>
        <p v-if="showTotal">顯示</p>
</div>

	var demo=new Vue({
			el: "#example",
			data: {
				showTotal:true,
				msg:'點選顯示與隱藏'
			},
			methods:{
				toggleShow:function(){
					this.showTotal=!this.showTotal
				}
			}
		})