模板语法
Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
插值
-
双大括号的文本插值：（msg为一个变量）
<span>插值文本是: {{ msg }}</span>
使用，执行一次性插值（即当数据改变时，插值处的内容不会更新）
<span v-once>这个将不会改变: {{ msg }}</span>
-
要输出HTML，需要使用指令：
<p>html常量: {{ rawHtml }}</p>
<p>使用v-html指令: <span v-html="rawHtml"></span></p>
//属性申明代码
data() {
return {
rawHtml:"<span style='color:red'>我的span</span>",
}
},
上述代码结果：
html常量: <span style='color:red'>我的span</span>
使用v-html指令:我的span
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
-
模板语法不能作用在HTML的属性上，遇到这种情况应该使用指令：
动态绑定id
<div v-bind:id="dynamicId"></div>
对于布尔 attribute (它们只要存在就意味着值为 true)，
v-bind工作起来略有不同，在这个例子中。
如果 isButtonDisabled 的值是null、undefined或false，则disabled属性 甚至不会被包含在渲染出来的<button>元素中。
<button v-bind:disabled="isButtonDisabled">Button</button>
-
除了绑定属性值，vue还提供了完全的js表达式支持：
{{ 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 } }}
指令
指令是带有
v-前缀的特殊属性，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
<p v-if="seen">现在你看到我了</p>
//数据
data(){
return{
seen:true
}
}
这里，v-if指令将根据表达式seen的值的真假来插入（移除）<p>元素。
-
一些指令能够接受一个“参数”，在指令名称后用冒号表示。
例如：
v-bind指令可以用于响应式地更新HTML 的属性
<a v-bind:href="url">这是个链接</a>
例如：
v-on指令，用于监听DOM事件
<a v-on:click="doSomething">点击事件</a>
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
例如，如果你的 Vue 实例有一个 data property attributeName，其值为 href，那么这个绑定将等价于v-bind:href。
同时，可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
-
修饰符是以半角句号指明的特殊后缀，用于支出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
