Vue語法基礎一（內部指令）
Vue官方提供了14個內部指令，本節只覆蓋6個（v-text、v-html、v-model、v-pre、v-cloak、v-once），剩下8個（v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-slot）將在後續章節陸續涉及。另外將插值表示式也一併介紹。
一、 插值表示式
插值表示式採用雙大括號的Mustache語法，一般用來繫結資料，也可以用來運算或呼叫方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門</title> </head> <body> <div id="app"> <!-- 繫結資料 --> <div>{{msg}}</div> <!-- 進行運算 --> <div>{{1+2+3}}</div> <!-- 呼叫方法--> <div>{{add(12, 13)}}</div> </div> <script src="../lib/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' }, methods: { add(x, y) { return x + y; } } }) </script> </body> </html>
為了精簡，後面模板程式碼不再貼出。
二、v-once指令
插值表示式的值會隨著資料的改變而改變。而v-once可以讓插值表示式只編譯一次，內容顯示之後就不再具備資料響應式的功能。
<div id="app"> <div v-once>{{msg}}</div> <div>{{msg}}</div> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script>
在瀏覽器控制檯中手動改變msg的值，被v-once修飾的的值不變，而沒有被v-once修飾的值會隨資料改變而改變。
三、v-cloak指令
該指令可以用來解決插值表示式閃爍的問題，但並不常用，閃爍是個小問題。
<style> [v-cloak] { display: none; } </style> <span v-cloak> {{msg}} </span> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script>
四、v-text指令
v-text也可以用來繫結資料，並且它沒有閃爍問題。但是工作中使用插值表示式居多，插值表示式更直觀和靈活，閃爍的缺陷也微不足道。
<span v-text="msg"></span> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script>
五、v-html指令
v-html指令可以解析資料中包含的標籤。
<div v-html="msg"></div> <script> new Vue({ el: '#app', data: { msg: '<h1>Hello World</h1>' } }) </script>
六、v-pre指令
v-pre指令可以阻止解析資料區內容，原樣顯示。
<div v-pre>{{msg}}</div> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script>
這時候，{{msg}}不會被'Hello World'替換，而是原樣顯示{{msg}}
七、v-model指令
v-model指令用來將檢視和模型進行雙向資料繫結
<div id="app"> {{msg}} <br> <input type="text" v-model="msg"> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello World' } }) </script>
通過input輸入框改變msg的值，這是檢視改變模型的內容；而msg值的變化又會改變檢視中{{msg}}的值，這是模型改變檢視的內容，Vue正是一個MVVM的框架。
最後簡單說一下mvvm，mvvm是model、view、view-model的縮寫。
model: 模型，或叫資料，也就是JS物件。
view：檢視，指dom物件。
但是model和view之間不可以直接互動，必須通過vm（view-model），Vue提供了這個互動的橋樑。view通過事件監聽去修改model的值，而model通過資料繫結去修改view的值。這樣就實現了雙向資料繫結。
PS：本系列文章同步更新於資淺碼農的公眾號