Vue.js模板語法

 

模板語法指的是如何將數據放入html中，Vue.js使用了基於 HTML的模板語法，容許開發者聲明式地將DOM綁定至底層 Vue 實例的數據。全部 Vue.js的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。

插入值

數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：

<span>Message: {{ msg }}</span>

若是是標籤的屬性要使用值，就不能使用「Mustache」語法，須要寫成使用v-bind指令：

<a v-bind:href="url" v-bind:title='tip'>百度網</a>

插入的值當中還能夠寫表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">連接文字</a>

指令

指令 (Directives) 是帶有「v-」前綴的特殊屬性。指令屬性的值預期是單個JavaScript表達式，指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM。常見的指令有v-bind、v-if、v-on。

<!-- 根據ok的布爾值來插入/移除 <p> 元素 -->
<p v-if="ok">是否顯示這一段</p>

<!-- 監聽按鈕的click事件來執行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按鈕</button>

縮寫

v-bind和v-on事件這兩個指令會常常用，因此有簡寫方式：

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>


<!-- 完整語法 -->
<button v-on:click="fnChangeMsg">按鈕</button>

<!-- 縮寫 -->
<button @click="fnChangeMsg">按鈕</button>