Vue.js——模板语法

模板语法

• 文本
  数据绑定最常用的形式就是使用双大括号的文本插值
  <span>Message: {{ msg }}</span>
• html代码
  双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令：
  <div v-html="rawHtml"></div>
  这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定
• js表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }

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

{{ var a = 1 }}
{{ if (ok) { return message } }}

• 参数
  一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：
  <a v-bind:href="url">...</a>
  另一个例子是 v-on 指令，它用于监听 DOM 事件：
  <a v-on:click="doSomething">...</a>

• 缩写

v-bind：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on:

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>