v-if
v-if指令可以完全根據表達式的值在DOM中生成或移除一個元素。
如果v-if表達式賦值為false，那么對應的元素就會從DOM中移除；
否則，對應元素的一個克隆將被重新插入DOM中，代碼如下：
<template>
<div id="app">
<h1>Title</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
greeting: true
}
})
</script>
v-show
v-show指令是根據表達式的值來顯示或者隱藏HTML元素。當v-show賦值為false時，元素被隱藏。查看DOM時，會發現元素上多了一個內聯樣式style="display:none"。
<template>
<div id="app">
<h1>Title</h1>
<p v-show="ok">我是對的</p>
<p v-show="no">我是錯的</p>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
ok: true,
no: false
}
})
</script>
如圖所示：
注：v-show不支持<template>語法。
一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁的切換，則使用v-show較好；如果在運行時條件不大可能改變，則使用v-if較好。
v-else
v-else就是JavaScript中的else的意思，它必須跟着v-if或者v-show使用。如下代碼：
<template>
<div id="app">
<h1>Title</h1>
<p v-if="ok">我是對的</p>
<p v-if="ok">我是錯的</p>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
ok: true
}
})
</script>
將v-show用在組件上時，因為指令的優先級v-else會出現問題，所以不要這樣做。我們可用用另一個v-show替換v-else。
v-model
v-model指令用來在input、select、text、checkbox、radio等表單控件元素上創建雙向數據綁定的。根據控件類型v-model自動選取正確的方法更新元素。代碼如下：
<div id="example">
<form>
姓名：
<input type="text" v-model="data.name" placeholder="姓名"/>
<br />
性別：
<input type="radio" id="one" value="One" v-model="data.sex"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">閱讀</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戲</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份：
<select v-model="data.identity">
<option value="teacher" selected>教師</option>
<option value="doctor">醫生</option>
<option value="lawyer">律師</option>
</select>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
</script>
v-for
使用$index來獲得相應的數組索引。
<template>
<div id="app">
<h1>Title</h1>
<ul>
<li v-for="item in items" class="item-{{$index}}">
{{$index}} - {{parentMessess}} - {{item.msg}}
</li>
</ul>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
: '前端開發基礎技術',
items:{
{msg: 'html'}，
{msg: 'css'},
{msg: ‘javascript'}
}
}
})
</script>
v-text
v-text 指令可以更新元素的textContent.
以下代碼效果一樣：
<span v-text="msg"></span> <br/>
<span>{{msg}}</span>
v-html
v-html指令更新元素的innerHTML.
<template>
<div id="app">
<h1>Title</h1>
<p v-html="msg"></p>
<p>{{msg}}</p>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg:'<p>效果一樣</p>'
}
})
</script>
v-bind
v-bind指令用於響應更新HTML特性，將一個或者多個attribute，或者一個組件prop動態綁定到表達式。
單向綁定，從M綁定到V.
v-bind可以簡寫為：
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 語法糖 --> <a :href ="url"></a> <!-- 完整語法 --> <button v-bind:display="block"></buttton>
在綁定class或者style時，支持其他類型的值，如數組或對象。如：
<template>
<div id="app">
<h1>Title</h1>
<div :class="[classA,{classB:isB,classC:isC}]”></div>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
classA: 'A',
isB: false,
isC: true
}
})
</script>
結果如圖：
v-on
v-on指令用於綁定事件監聽器。事件類型由參數指定。
如果訪問原始DOM事件，可以使用$event傳入方法。
<template>
<div id="app">
<h1>Title</h1>
<p> {{}} </p>
<button v-on:click="doThis">doThis</button>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: 'hello world',
},
methods: {
doThis: function(){
this.msg = 'hello world change !!!'
}
}
})
</script>
v-cloak
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
css代碼：
<!-- css代碼 -->
[v-cloak]{
}
<!-- html -->
<div v-cloak>
{{msg}}
</div>