2.1　Vue模板语法

我们在上一章提到过，Vue使用了HTML的模板语法，Vue的核心是允许开发者使用简洁的模板语法声明式地将数据渲染进DOM的系统，简单来说就是将模板中的文本数据放入DOM中，可使用mustache语法“{{}}”完成。

2.1.1　模板语法

模板语法的基本使用，主要从文本、HTML、JavaScript表达式这几个方面来介绍。如何使用模板语法“{{}}”渲染数据，我们在第1章中已经接触过，下面通过例2-1来学习模板语法。

【例2-1】演示模板语法。

例2-1运行结果如图2-1所示。

图2-1　模板语法

2.1.2　插值

Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。文本插值以“{{}}”形式插入，然后输出纯文本。

“{{　}}”将数据解析为纯文本，如果要解析为HTML，需要使用v-html指令，下面通过例2-2来学习v-html。

【例2-2】演示输出HTML。

在第2行中使用v-html输出data中定义的message的值，在message中使用HTML标签。

2.1.3　表达式

Vue支持JavaScript的所有表达式。

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。但有一个限制，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

对于JavaScript表达式在模板语法中的使用，只适用于简单的表达式，复杂的可以使用后面要学习的计算属性computed。