## 模版語法 ### 插值 1.文本的插入值 ~~~ <span>Message: {{ msg }}</span> ~~~ 2.原始html的插入 ~~~ <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> ~~~ 3.屬性的綁定 ~~~ <div v-bind:id="dynamicId"></div> ~~~ ~~~ <button v-bind:disabled="isButtonDisabled">Button</button> ~~~ 5.javascript表達式 ~~~ {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> ~~~ ### 指令 指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外情況，稍后我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。回顧我們在介紹中看到的例子 ~~~ <p v-if="seen">現在你看到我了</p> ~~~ ~~~ <a v-bind:href="url">...</a> ~~~ ### 縮寫 ~~~ <!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> ~~~ ~~~ <!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a> ~~~