前文
本文依然根据Vue的官方教程大概抄写
仅有少部分的改动
模板与render
我们平时写代码的时候通常使用模板，vue在发现我们使用模板的时候
会将模板转译为render函数
vue会根据render函数来读取出虚拟的dom节点
最后根据虚拟dom节点来渲染出真实dom
因为虚拟dom是一个抽象dom，所以一旦出现改变的时候
交叉对比虚拟dom，来重新修改真实dom，达到减少操作数的目的
注意，这里的减少dom操作数未必是一个最优情况，但是远远高于我们普通人自己来写计算规则
插值
文本
我们使用大括号来包含我们data内声明的数据，计算属性等等需要改变的数据
一旦触发改变，模板上的显示会跟随数据进行更新
如
<span>Message: {{ msg }}</span>
我们也可以使用v-once指令来进行一次性插值
当数据再次发生改变的时候不会更新该处数据
<span v-once>这个将不会改变: {{ msg }}</span>
原始html
如果使用{{}}会将其解释为文本，但是如果我们想渲染html，我们需要使用v-html指令
但我们不能在内使用属性绑定等，因为vue会直接忽略。
注意，不用将用户提供内容作为其显示内容，否则容易导致出现攻击行为
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Attribute
文本的语法不能在html属性中实行，但是我们可以使用v-bind指令
<div v-bind:id="dynamicId"></div>
如果绑定的值为null或undefined，则该属性不会出现在渲染的元素上
对于bool类型的属性v-bind工作有所不同
<button v-bind:disabled="isButtonDisabled">按钮</button>
如果 isButtonDisabled 的值为真，则disabled属性包含在内，如果该值为一个字符串，同样也会包括在捏
与disabled=""一致，对于其他为假的值，该值会被忽略
表达式
在括号里我们可以使用js表达式，如
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
但是注意每个绑定只能使用单个表达式，下列例子不会生效
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令为带有v-前缀的属性，通常为单个js表达式，指令的职责是当表达式的值改变的时候会出现对应的行为
并响应到dom元素上
<p v-if="seen">现在你看到我了</p>
如根据seen的真假会或移除dom元素
参数
我们可以以响应式的去更新一些属性，如
<a v-bind:href="url"> ... </a>
这里href是参数，v-bind告诉将href与url变量绑定，一旦url改变，href内容也会相应改变
另一个例子是v-on指令
<a v-on:click="doSomething"> ... </a>
这里我们监听了click点击事件
动态参数
我们也可以在指令参数上使用js表达式，但需要用方括号括起来
<!--
注意，参数表达式的写法存在一些约束.
-->
<a v-bind:[attributeName]="url"> ... </a>
这里的attributeName会作为一个js表达式动态获取结果，作为最终绑定的参数来使用
如果attributeName为href，则最终为v-bind:href="url"
我们也可以使用动态参数为一个动态事件名绑定处理函数，如
<a v-on:[eventName]="doSomething"> ... </a>
当eventName的值为focus时，则为v-on：focue=“doSomeThing”
修饰符
相当于对于事件处理的语法糖，使用.后跟随一些文本，告诉一个指令应该对于触发的事件调用进行怎样的处理。
如.prevent告诉v-on对于触发事件调用使用event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
缩写
我们可以把v-bind:写为: 把v-on:写为@,如
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>
看起来与传统的html不同，但:与@属于合法字符，在支持vue的浏览器上可以正确的被解析出来
同时不会出现在最终渲染中。
注意事项
对动态参数值约定
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式约定
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
JavaScript 表达式
模板表达式都被放在沙盒中，只能访问一个受限的全局变量列表
，如 Math 和 Date。你不应该在模板表达式中试图访问用户定义的全局变量。
置顶卡
沉默卡
照妖镜
