vue模板语法与绑定指令

1.插入文本

 <!-- 插入文本 -->
<span>Message: {{ msg }}</span>
 <!-- 插入HTML元素 -->
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

2.v-bind绑定元素属性

<div v-bind:id="dynamicId"></div>
<!-- 缩写 -->
<div :id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button> 
  <!-- 只有当isButtonDisabled的值为true时，disabled属性才能被渲染出来 -->

3.支持JavaScript表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 只能解析单个表达式 -->

<!-- 这是语句，不是表达式，不会解析 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

4.v-if 控制元素的显示与隐藏

<p v-if="seen">现在你看到我了</p>

5.指令的参数

一些指令能够接收一些参数，在指令名称之后以冒号表示

动态参数为用方括号括起来的表达式（动态参数表达式里，空格和引号是无效的）

<!-- href为参数，将url与href绑定 -->
<a v-bind:href="url">...</a>
<!-- 参数为click，表示监听的事件名 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数 -->
<a v-bind:[attributeName]="url"> ... </a>

6.指令修饰符，指出指令应该以特殊方式绑定

<!-- .prevent表示触发事件event.preventDefault() -->
<form v-on:submit.prevent="onSubmit">...</form>

<div v-bind:id="dynamicId"></div>