5. 模板语法

插值

文本

数据绑定最常见的是双大括号插值方式：

<span>{{message}}</span>

这种方式便可以将data中的值绑定在dom上。
也可以用下面这种方式进行一次性插值：

<span v-once>{{message}}</span>

这样就可以执行一次性插值，就是需要注意这个标签下面其他值也会只渲染一次。

原始html

双大括号只能将内容原原本本的写出来，如果需要转成专门的html，就需要v-html

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

上述两行文字编译之后发现：
第一行仅仅只将html代码直接输出而已，
第二行则是正确的将html代码指令输出了。

【需要注意，随意使用html代码输出容易导致Xss攻击，绝对不要对用户开放html代码输出的接口】

特性

Mustache语法不能作用在html特性上，遇到这种情况应该使用v-bind指令：

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

该语法可以赋值给创造的属性，而赋值的值是布尔特性的（他们只要存在就意味着true，如disabled）

<button v-bind:disabled="isButtonDisabled">Button</button>

如果这部分的值是null,undefined或者false，则该属性本身甚至不会被渲染，检查元素会发现属性并没有出现。

使用js表达式

赋值可能会被用在多个地方，但是这些值需要经过一些处理才能使用，而其中一种方式就是直接在大括号中书写表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

需要注意，大括号里只有表达式，js语句，if语句，方法什么的都不会生效。（想要使用方法可以使用其他方式）

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。