[Vue] 模板語法 1/2

常見的模板語法

• Mustache(雙大括號)

只要變數更新，模板就會更新

{{ var }}

• 一次性綁定

只有第一次會更新模板

<div v-once>{{showHint}}</div>

• HTML 解析

<div v-html="rawHtml"></div>

*. 使用v-html正確解析 HTML內容

• 屬性綁定

<input type="text" v-bind:disabled="!canTypeIn">

*. 使用v-bind綁定 HTML 元素屬性

常見的指令

• v-if

<div v-if="showHint">看情況顯示文字</div>

• v-bind:屬性名稱="要綁定的變數"

<span v-bind:title="loadTime">

    滑鼠移置文字上，顯示'網頁啟動時間'

</span>

*. 縮寫 :bind:屬性名稱="要綁定的變數"

• v-on:事件名稱="要綁定的方法"

<button v-on:click="switchShowHint">開關</button>

*. 縮寫 @click="要綁定的方法"

source code