8.template模板

我們將做做案例、專案等一些固定的語句用法放在一個模板中，

以後程式碼規範的縮排改為兩個空格

這個就當做預設模板來使用

其實這節就是說了程式碼規範之縮排兩個空格

9-1.插值操作 - mustache

插值操作是什麼？

例如上面的例子，在data裡面定義了一個數據，希望把這個值插入到DOM裡面進行顯示

mustache的翻譯是鬍子/鬍鬚的意思

之前我們最常用的插值操作就是mustache語法，即雙大括號{{}}語法

mustache中不僅僅可直接寫變數，還可以寫一些簡單的表示式，如+

執行結果如下：

如果我們想要在這兩個中間加一個空格，應該怎麼寫：

執行效果如下：

它還可以這樣做，計算數值：

執行結果如下：

但是現在我們寫的div中的語句太長了，這個也是有解決辦法的

就是使用計算屬性：computed；這個以後再講

9-2.插值操作 – 其他指令

1.v-once 取消響應

我們知道現在我們所建立的vue檔案是響應式的，也就是我們在瀏覽器中的F12修改就會實時更新的

但是如果我們不想讓它發生改變，不希望跟著變化時，就需要用到v-once了

執行結果如下：

中間加了v-once的語句便不會修改

並且v-once和v-for不一樣，v-for後面可以跟表示式，但是v-once後面不能跟

2.v-html 以html效果展示

當我們傳入的屬性本身就是html標籤的時候，可以使用v-html

執行結果：

3.v-text 展示文字型別

一般不用，不夠靈活，也不能像mustache那樣能拼接

執行效果如下：

4.v-pre 顯示原本內容

例如我們想要顯示的效果就是{{message}}本身

執行結果如下：

5.v-cloak 程式碼顯示之前

針對執行js程式碼突然卡住了的情況

例如，我們先將程式碼執行效果延遲1秒鐘setTimeout

執行結果如下：

加了v-cloak之後

執行結果如下：

6.v-for=”” 遍歷

這個之前說過，不再細說