## 模版语法 ### 插值 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> ~~~