绑定语法
给HTML中添加变量，让HTML中的内容也可以随程序中的变量改变而改变。
{{ ... }} 双括号语法，也叫大胡子语法（Mustache）
官方名字：Interpolation（补缺、插值的意思）。
{{ }}双括号中可以放变量、js表达式、函数调用、创建对象、访问数组元素、三目等，不能放程序结构（分支和循环），没有返回值的函数调用。
注：只能绑定元素的内容，无法绑定元素的属性值。
示例：
指令
Vue.js提供的，专门增强HTML功能的特殊的HTML属性。
1.元素的属性值可能发生变化：v-bind
用法：<any v-bind:属性名="数据变量/js表达式">......</any>
简写：v-bind可省略，<any :属性名="数据变量/js表达式">......</any>
2.根据程序中的变量值控制一个元素的显示与隐藏：v-show
用法：<any v-show="js条件">......</any>
原理：new Vue() 扫描到 v-show 时，自动执行js条件，如果条件为true，则该元素原样显示；否则如果js条件执行结果为false，则 new Vue() 自动为当前元素添加display:none,隐藏该元素。
3.根据程序中的变量值控制一个元素的显示与隐藏：v-if
用法：<any v-show="js条件">......</any>
原理：new Vue() 扫描到 v-if 时，自动执行js条件，如果条件为true，则保留该元素，否则如果js条件执行结果为false，则删除该元素！
v-show vs v-if
v-show 采用display:none方式隐藏元素，不改变Dom树，效率高！
v-if 采用添加删除元素方式控制元素显示或隐藏，可能频繁改变Dom树，效率低！
4.根据变量控制两个元素二选一显示或隐藏：v-if v-else
用法：<元素1 v-if="条件">
<元素2 v-else>
原理：每次扫描时判断条件的值，如果条件为true，就显示元素1，删除元素2；如果条件为false，就显示元素2，删除元素1
注：（1）两个元素之间不能插入其他元素，必须紧挨着写；
（2）和 js 程序一样，v-else后不需要写任何条件
（3）不是用display:none隐藏，而是彻底删除不显示的元素
5.根据变量控制多个元素多选一显示：v-else-if
用法：<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
......
<元素n v-else>
原理：每次扫描时判断条件的值，哪个元素条件为true，就显示哪个元素，并删除其他元素；如果之前所有条件都不满足，就显示最后一个元素，删除之前所有元素。
注：（1）v-if 和 v-else-if 和 v-else 之间不能插入其他元素，必须紧挨着写；
（2）和 js 程序一样，v-else后不需要写任何条件
（3）不是用display:none隐藏，而是彻底删除不显示的元素
6.反复生成多个相同结构的HTML元素：v-for
用法：（1）<要反复生成的元素 v-for="(value,i) of 数组/字符串" :key="i">
（2）<要反复生成的元素 v-for="(value,key) of 对象" :key="key">
（3）<要反复生成的元素 v-for="i of 整数">
原理：new Vue() 会自动遍历of后的数组中的每个元素；每遍历一个元素，就创建一个当前HTML元素的副本；of前的两个变量：value会自动获得当前正在遍历的数组元素值，i会自动获得当前正在遍历的下标位置；如果当前元素或子元素中，需要正在遍历的元素或下标，可用绑定语法来绑定value和i的值。value和i的使用范围仅限于当前元素及其子元素范围内，不能再当前元素外使用。
注：（1）v-for 可遍历一切数字下标的元素：数组/字符串/对象等；
（2）<元素 v-for="i of 整数">可以重复生成从1开始到这个整数的次数的HTML元素，of前的i会依次获得12345可用于绑定在元素的内容中。eg：分页按钮。
（3）a.不加:key="i" 反复生成的元素是无差别的，如果将来数组或对象中的某一个成员值发生了改变，就无法精准找到并区分要更改的是哪一个元素，只能将这组元素全部重新生成一遍——效率低！
b.加上:key="i" ，等于对每个元素加上一个不重复的标识i。如果将来数组或对象中某一个成员值发生了改变，即可根据key属性的值精确找到要更改的一个HTML元素，只更改受影响的一个HTML元素即可，不用将这组HTML元素全部重新生成一遍——效率高！
（4）当数组中保存的是原始类型的值时，在程序中修改数组中某个元素值时，不能使用[下标]方式访问，因为此时下标方式是不受监控的，即使修改成功，页面也不会自动更新。应该用.splice(i,1,"新值")代替。但是如果数组中保存的是引用类型的对象，则可以用[下标]修改。
7.绑定HTML片段内容：v-html
用法：<元素 v-html="包含HTML内容的变量或js表达式">
8.防止用户短暂看到{{}}：v-cloak
因为vue代码是放在js文件中的，所以如果网速慢，vuediamante暂时没有下载下来时，用户很有可能短暂看到页面上的绑定语法，用户体验不好。
用法：（1）在包含绑定语法的元素上添加v-cloak属性；
（2）在css中手动添加样式：[v-cloak]{display:none}。
原理：（1）用属性选择器查找所有带有v-cloak属性的元素，暂时隐藏；
（2）当new Vue()渲染完成时，自动找到所有v-cloak属性，自动移除。
9.防止用户短暂看到{{}}：v-text
用法：<元素 v-text="变量或js表达式">......</元素>
原理：因为绑定语法写在了元素的属性里，所以，如果不是vue帮忙，用户是无论如何看不到元素属性中的内容的。当 new Vue() 读取到 v-text 的内容时，会解析 v-text 的内容，替换元素开始标签和结束标签之间的内容。
10.事件绑定：v-on / 简写@ 简写
用法：（1）标准写法：<元素 v-on:事件名="处理函数(实参值...)">
（2）简写：<元素 @事件名="处理函数(实参值...)">
（3）函数不需要传参时，()可省略。<元素 @事件名="处理函数">
11. v-once
仅在首次渲染页面时绑定一次，即使之后模型变量再改变，也不会自动更新页面。
原理：只在首次加载时，一次性将模型数据显示在当前元素，不会将当前元素加入到虚拟Dom树中。
12. v-pre
保留当前元素中的{{}}语法，不进行绑定渲染。
