一、模板语法
1）文本：
//使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新 <span v-once>这个将不会改变: {{ msg }}</span>
2)原始HTML
//使用 v-html 指令
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
3)属性
//需作用在 HTML属性上时，应该使用v-bind 指令，在html属性内不能使用插值表达式 <div v-bind:id="dynamicId"></div>
//对于布尔属性 (它们只要存在就意味着值为 true) <button v-bind:disabled="isButtonDisabled">Button</button>
4）使用JS表达式
Vue.js支持所有数据绑定中JavaScript表达式的全部功能
// 每个绑定只能包含一个表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> //错误写法 <!-- this is a statement, not an expression: --> {{ var a = 1 }} <!-- flow control won't work either, use ternary expressions --> {{ if (ok) { return message } }}
二、指令 ：带有 v- 前缀的特殊属性
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
2）参数：
//该v-bind指令用于反应性地更新HTML属性,参数是href <a v-bind:href="url"> ... </a> //v-on指令，该指令侦听DOM事件,参数是要监听的事件名称 <a v-on:click="doSomething"> ... </a>
3）动态参数：
3.1)在指令参数中使用方括号括起来的JavaScript表达式
//如果你的 Vue 实例有一个 data property attributeName，其值为 "href",那么这个绑定将等价于 v-bind:href <a v-bind:[attributeName]="url"> ... </a>
3.2)对动态参数的值的约束：
异常情况下值为null,这个null可被显性地用于移除绑定，任何其它非字符串类型的值都将会触发这个警告
3.3)对动态参数表达式的约束：
空格和引号是无效的，办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写
<!-- 这会触发一个编译警告 --> <a v-bind:['foo' + bar]="value"> ... </a>
4）修饰符：
以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
5）缩写：
v-bind 缩写
<!-- v-bind 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
注意 ：模板表达式已沙箱化，只能访问全局白名单 （在新窗口中打开）如Math和Date。您不应尝试在模板表达式中访问用户定义的全局变量。