模块语法（1）

一、模板语法

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。您不应尝试在模板表达式中访问用户定义的全局变量。