前言
Vue官網一共有提供了14個指令，分別如下
v-textv-htmlv-showv-if☆☆☆v-else☆☆☆v-else-if☆☆☆v-for☆☆☆v-on☆☆☆v-bind☆☆☆v-model☆☆☆v-slotv-prev-cloakv-once
注意：☆代表重要常用的
v-text（v-指令名="變數"，變數需要data提供數值）
<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<script>
new Vue({
el: '#app',
data: {
info: 'a'
}
})
</script>
v-text="info"渲染頁面結果為a，因為info是個變數，就直接展示變數所對應的值
v-text="'abc' + info"渲染頁面結果為abca，當你想用字串和變數拼接時，可以在字串上增加單引號，這樣程式就認為你這個是個字串，字串+info變數最後的結果就是字串abca
v-html（可以解析html語法）
有時候我們的Vue物件中，或者是後臺返回給我們一個段原生的html程式碼，我們需要渲染出來，那麼如果直接通過{{}}渲染，會把這個html程式碼當做字串。這時候我們就可以通過v-html指令來實現。示例程式碼如下：
<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>
以上兩行程式碼除了用的vue指令不一樣以外，沒有任何區別，讓我們先展示結果吧
ok
<b>ok</b>
v-html可以解析html的標籤，而text傳的是字串，不用管字串裡面具體的內容是什麼，統一都直接展示出原來的字元
v-once（只渲染元素和元件一次）
只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
<input type="text" v-model="msg" v-once> // 只渲染一次
<p v-once>{{ msg }}</p>
v-cloak（防止頁面閃爍）
這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的Mustache標籤直到例項準備完畢。
v-pre（瞭解）
跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
<div id="app">
<span v-pre>{{message}}</span>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
}
})
</script>
正常來講我們會通過編譯最後在網頁上顯示hello，但是使用了v-pre指令後，就會跳過編譯，直接展示原始的標籤內容也就是{{message}}
v-bind
繫結屬性
如果我們想要在html元素的屬性上繫結我們Vue物件中的變數，那麼需要通過v-bind來實現。
<div id="app">
<a v-bind:href="baidu">百度</a>
<img :src="imgSrc" alt="">
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
baidu: "https://www.baidu.com",
imgSrc: "https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
}
})
</script>
我們只需要在繫結的屬性前面新增v-bind:即可，當然我們也可以使用縮寫:，直接寫冒號即可
繫結Class
繫結Class有2種方式，一種通過陣列繫結，一種通過物件繫結
1.通過物件的方式來實現：
<div id="app">
<p v-bind:class="{color:isColor}">你好，世界</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
isColor: true
}
})
</script>
<style>
.color{
color: blue;
}
</style>
物件的方式即像上面的程式碼{color:isColor}，key是color，value是isColor，當value的值為true則渲染，為false則不渲染
2.通過陣列的方式來實現：
<div id="app">
<p :class="[classname1, classname2]">{{message}}</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello",
classname1: "pcolor",
classname2: "fontSize"
},
})
</script>
<style>
.pcolor{
color: red;
}
.fontSize{
font-size: 30px;
}
</style>
當class需要繫結2個屬性時，可以使用陣列的方式