Vue.js sh使用基本的HTML模板语法。

差值

文本

“Mustache”

“Mustache”（{{}}）语法的文本差值是最常见的数据绑定形式。
例如：<span>Message: {{ msg }}</span>
“Mustache”标签将会被替代为对应的数据对象上的msg属性的值，只要所绑定的数据对象msg发生变化，所对应的标签的内容也会随之发生变化。``

v—once指令

通过使用v-once指令，可以只执行一次性改变的实现，当数据绑定的对象发生改变的时候，插值处的内容不会发生改变，注：但会影响到该节点其他数据的绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

{{}} 双大括号解释为普通文本，而并不是HTML源代码，假如要绑定的对象的属性的内容是HTML标签，则需要v—html指令

<div id="app">
     <p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>
        <script>
          var obj = {
      rawHtml: '<span style="color: red;">hello word！</span>'
    }
    new Vue({
      el: '#app',
      data: obj
    })
        </script>
    </body>

浏览器显示

特性

Mustache不能作用在标签的属性上，应该使用v-bind指令：

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

在属性的值是布尔类型的时候，并且他们的值是true，v-bind工作起来有所不同
例如：

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

如果isButtonDisabled的值是null 、undefined、false，则disable特性甚至不会被包含在渲染出来的元素中。

使用JavaScript表达式

对于数据绑定，Vue.js提供了完全的JavaScript的表达式支持
例如：变量的加减乘除、三目运算、字符串拆分、字符串的拼接
`{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

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

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

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

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令（Directives）是带有v-前缀的特殊特性，

<div id="app">
     <p>Using mustaches: {{ seen }}</p>
<p v-if="seen">现在你看到我了</p>
    </div>
        <script>
          var obj = {
    seen:'true'
    }
    new Vue({
      el: '#app',
      data: obj
    })
        </script>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

一些指令能够接受一个参数，在指令名称之后以冒号表示，例如v-bind指令可以用响应式的更新HTML特性

<a v-bind:href="url">...</a>

在这里href是v-bind的参数，也是a标签的特性。将该元素的href特性与url的值进行绑定

缩写

v-bind 缩写

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

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。