首先我們要先了解甚麼是模板語法? 而甚麼是模板?

模板

模板其實跟render function 是一樣的運作模式的~
我們會將模板編譯成為render funciton 之後開始渲染頁面，而模板就是一個可以讓Vue觀察~ 「ㄟ?你有沒有做更改?」如果你有做更動，那麼他就會使render function 跑起來然後順利更改頁面!

那模板語法，就是這個前端要用甚麼語法來寫這個響應式的模板~
而Vue簡單的地方就在於，他是用HTML來做為模板語法

Mustache {{雙下巴}}

這就是Vue用來實踐模板功能的一大特色，而這個東西也是一個最基本的 Data-binding，我們直接先來看一下code

<div> Title: {{title}} </div>

這句你會放在 template的地方，想這樣 (順帶一提~ tmeplate就是模板的意思~ 而之所以他不叫 html的原因就是因為他部式真正真正的純HTML)

<template>
  <div>
    Title : {{title}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      title: 'love',
    }
  }
}
</script>

那接下來你看到我在底下 script 裡面，寫到了一個

data() { return{title: 'love'}}

這就是我定義的，告訴上面tmeplate我有一個資料叫做 title，他會隨著我下面給予的值去做更動! 所以網頁就會長這個樣子:

不只Text，也可以綁定HTML

我們也可以綁定一個 HTML Tag, 各位如果對於HTML不熟悉的話可以參考我之前介紹的~ https://ithelp.ithome.com.tw/articles/10234247
雖然HTML tag 的綁定不是使用雙下巴，但既然都提到了就稍微講一下吧~

因為雙下巴式給 text使用了，所以我們要用另外一個東西叫做 v-html
舉同樣一個例子:

<template>
  <div v-html="love"></div>
</template>

<script>
export default {
  data(){
    return{
      love: "<p> Love is EveryWhere </p>"
    }
  }
}
</script>

我們可以看到我再 v-html後面綁定了一個叫做 love 的 data (也同時跟Vue說這個 data type 就是一個 HTML標籤)。
這樣我們就可以得出跟這個一模一樣得東西:

<div v-html="love">
    <p> Love is EveryWhere </p>
</div>

回到雙下巴~ 我們還可以寫JS在裡面

這邊要先澄清~ 我所謂的可以寫JS在裡面並不代表真正的能這樣

<div>
    {{var love = 100;}}
    {{if (love > 20) console.log('wtf');}}
</div>

絕對不是這樣的，那這樣這個Vue就不需要 script tag了lol
正確來說~ 我們可以放一個陳述式 (也就是最後會得出一個值)
例如:

<div>
    {{love + 100}}
    {{love > 20? 'wtf':'omg')}}
</div>

後記~

我知道大家很想要開啟project了，但是我掙扎了一下還是希望能先用白話文的方式跟各位介紹一下我們之後會常用到的功能~
明天也會繼續介紹Vue的模板語法，可以更深入的了解到Vue還能拿來選染更多不同東西和不同attribute.