###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day2 模板語法

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

模板語法，簡單來說就是`邏輯`與`頁面`之間的溝通

<font style="font-weight:bold;font-size:20px;line-height:50px">
Vue模板語法共分為兩種
</font>

:::info
**Mustache語法 - 就是雙大括號**
:::

Mustache標籤會將實體上的屬性值放到對應的DOM上

以下面例子來看，每秒`a`都會+1，每當a的值變化，就會重新渲染畫面
若加上`v-once`可以讓它只渲染一次，就會一直停在`1`

<div id="app">
    <span>{{a}}</span>
    <span v-once>{{a}}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        a: 1
    },
    created() {
        setInterval(() => {
            this.a++;
        }, 1000);
    }
});

**Mustache重點**

==必須使用表達式==。簡單來說表達式就是要能產生一個值，如下例子:

<div id="app">
    <div>加一: {{a + 1}}</div>
    <div>三元運算: {{a % 2 === 0 ? 'even' : 'odd'}}</div>  
    <div>物件屬性: {{a.toString().length}}</div>
    ...
</div>

==不能使用語句==。Mustache裡只能撰寫表達式，所以下面的寫法是不行的:

<div id="app">
    <div>{{ var a = 0; }}</div>
    <div>{{ if (a > 100) a=1; }}</div>
</div>

:::info
**指令Directives**
:::

Directive比較像html的屬性會影響DOM本身，讓DOM元素響應造成屬性或是渲染的變化

**Directives命名**
為了與html原先的屬性作區隔，都會加上`v-`作為前綴

**Directives功能**
依照設置改變頁面渲染的方式。例如`v-if`可以條件根據決定是否要渲染、`v-for`重複渲染元素等等...

接著介紹幾種常用的Directives
:::success
`v-html`將資料當作html做渲染
:::

<div id="app">
    <div>{{html}}</div> 
    <!--Mustache 標籤會將 html 資料當作字串輸出。 -->
    <div v-html="html"></div>
</div>

var vm = new Vue({
    el:'#app',
    data: {
        html: '<h1>Hello world</h1>'
    }
});

`v-html`會將html資料設置元素(`<div>`)的 innerHTML，所以渲染完成的頁面會是

<div><h1>I am header</h1></div>

>Vue不鼓勵直接改變HTML，如果使用到 v-html 建議包成 Components。

:::success
`v-if`以變數決定是否要渲染元素
:::

<div id="app">
    <div v-if="Istrue">有出現</div>
    <div v-if="!Istrue">沒出現</div>
</div>

:::success
`v-bind` 屬性綁定 ( 縮寫`v-bind:id` → `:id` )
:::
有v-bind，vue就會知道這個屬性要抓取實體上的資料做渲染。
>如果綁定的值是布林值，如果是null 、 undefined 或是 false 的話，此屬性就不會被渲染出來

<div id="app">
    <div v-bind:id="bind_content">Bind Directives</div>
</div>

var app = new Vue({
    el:'#app',
    data:{
        bind_content:'new_id'
    }
}) 

結果會是，可以看到`id`跟`data` `bind_content`的資料綁定了

<div id="new_id">Bind Directives</div>

:::success
`v-on` 事件綁定 ( 縮寫`v-on:click` → `@click` )
:::

當要在 `<button>` 或是其他元素上綁定事件時，使用 `v-on` 來綁定，看個簡單例子

<div id="app">
    <span>{{count}}</span>
    <button v-on:click='ClickTest'>count--</button>
</div>

var app = new Vue({
    el:'#app',
    data:{
        count:100
    },
    methods: {
        ClickTest() {
              this.count--;
        }
    }
}) 

結果會是，可以看到`button`跟`ClickTest`事件綁定，每點一次就會讓`count--`
 -----點了一下----> 

>也可以加上once像這樣
>`<button v-on:click.once='ClickTest'>count--</button>`
>該事件就只會觸發一次

---

:::danger
**還有一個很常用很強大的模板語法==v-model==，因內容較多，下一篇再繼續!!**
:::

---

*參考資料: https://reurl.cc/6Z9YDO*
*參考資料: https://reurl.cc/anR8kZ*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*