vue模版文法介紹

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  v-bind:title='tip'>百度網</a>
           

插入的值當中還可以寫表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >連結文字</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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >...</a>

<!-- 縮寫 -->
<a :href="url" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >...</a>


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

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