Vue的基本语法（插值与指令）

模板语法

Vue.js使用了最基本的HTML语法，可以声明试的将DOM绑定到底层Vue实例的数据中。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数，结合响应系统，Vue 能够得出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

---

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<p> 计算结果:{{ msg }} </p>

Mustache(双大括号) 标签将会被替代为对应数据对象上 msg 的值。无论何时，绑定的数据对象上 msg的值发生了改变，插值处的内容就会被更新。

提示：通过添加 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。简单说就是赋值后就不可改变，但请留心这会影响到该节点上的其它数据绑定：

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

1、文本与原始HTML

双大括号会将数据解释为普通文本(默认是：v-text指令)，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令，要把二者区分开来，示例如下：

<div id="app">
        <p v-text>{{ message }}</p>
        <p v-html style="color: red;">Hello!</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "<p style='color: red;'>Hello!</p>"
            }
        })
    </script>

提示：第一个p标签会原样输出属性值，第二个p标签会解析成HTML输出(会忽略属性值中的数据绑定)。

不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。
站点上动态渲染的HTML都可能非常危险，因为它很可能导致XSS(跨站脚本攻击)攻击，请只对可信赖的内容使用HTML插值，不要对用户提供的内容使用插值。

2、使用javascript表达式

在示例中，都是简单的绑定属性值，但实际上，，对于所有的数据绑定，Vue.js都提供了完整的 JavaScript 表达式支持。

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

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

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是带有 “v-” 前缀的特殊 标志。指令的职责是，当表达式的值发生改变时，将其产生的连带影响，响应式地作用于 DOM，重新渲染Web。回顾我们在介绍中看到的例子：

<p v-if="see">现在你看到我了</p>

这里的v-if指令是根据表达式see的值的真/假来插入/移除元素的，如果为真则插入p元素，为假则移除p元素。

1、参数

有些指令可以接收参数，在指令后面接：表示，如v-bind指令可以用于响应式的更新HTML属性。

<a v-bind:href="url">这是一个链接</a>

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
另一个是v-on指令，用来监听DOM时间，如：

<a v-on:click="onClick">点击事件</a>
在这里参数是监听的时间名

2、修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>
(event.preventDefault()是通知浏览器不要执行与事件关联的默认动作)

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 属性。当你为现有标签添加动态行为时，v-前缀很有标识，然而，对于需要频繁用到的指令来说，就很繁琐，这时，就可以用对应缩写，如上面用到的v-bind与v-on，这两个也是经常使用到的，特定简写为：

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

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

<!-- 完整语法 -->
<a v-on:click="onClick">...</a>

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

缩写语法是完全可选的，但是它们不会出现在最终渲染的标记上。

---