一、vue插值语法
在界面中标记哪里可能发生变化的特殊的语法就是vue插值语法。
只要一个 元素的内容 希望随着程序自动变化时，都要用 {{ }} 绑定来标记。
<元素> {{ 变量名 }} </元素>
二、v-bind
如果希望 元素的属性值 也随程序自动变化，如果使用{{ }}，会报错 ！
{{ }}只支持元素内容变化，不支持属性值变化。
只要希望 元素的属性值 随程序自动变化，都要 用v-bind或：代替{{}}
<元素 v-bind:属性名="变量或js表达式">
简写：<元素 :属性名="变量或js表达式">
三、v-show
专门控制一个元素显示隐藏的特殊指令，只要想控制一个元素显示隐藏都用v-show。
<元素 v-show="bool类型变量或者js表达式">
四、v-if和v-else
如果两个元素都要控制显示隐藏，而且根据同一个条件二选一显示隐藏；用v-show做的话，就要被迫把条件写两遍！所以，只要控制两个元素二选一显示，都用v-if和v-else。
<元素1 v-if="判断条件">
<元素2 v-else>
注 ：v-if和v-else所在的两个元素必须连着写！中间不能插入任何其他元素！v-else后一定不要写条件！
------------------------------------------v-show vs v-if-------------------------------------------------------
v-show 用display:none隐藏元素
v-if v-else 用删除元素方式隐藏元素
问题：v-if或v-else被删除的元素，怎么又重新回到页面的？
解答：虽然DOM树中的元素被删除了，但是虚拟DOM树中的元素，没有被删除。
五、v-else-if
只要多个元素，多选一显示隐藏，就可以用v-else-if和v-if、v-else配合实现。
<元素1 v-if="条件1">
<元素1 v-else-if="条件2">
... ...
... ...
<元素n v-else>
注：v-if、v-else-if和v-else所在的多个元素必须连着写！中间不能插入任何其他元素！v-else后一定不要写条件！
六、v-for
专门反复生成多个相同结构的元素的特殊指令。只要在网页上，反复生成多个相同结构名单时内容不同的一组元素时，都用v-for。
<要反复生成的元素 v-for="(当前元素值，当前位置) in 数组名称" :key="i">
坑：Vue中禁止使用下标，修改数组中的元素值。
因为数组的下标是数字，都必须用数组API修改。因为数组的所有API都是受vue监控的。
比如： vm.数组[i]=新值 错误x 页面不会改变
vm.数组.splice(i,1,新值) 正确√ //先删除i位置的一个旧元素，再在i的位置添加一个新元素替换
-------问题1-------：
v-for反复创建的多个元素，除了内容不同之外，默认没有任何差别！如果我们用程序修改了数组中某一个元素时，v-for不知道该对应修改哪个元素副本。于是，就会采用最笨的方法删除所有旧元素，重新遍历整个数组，并重建整个列表。这种方法效率极低。
-------解决-------：
今后只要使用v-for，都必须同时绑定:key="i"属性；这样，从此v-for生成的每个元素副本身上，都多了一个唯一的标识key。值是不重复的。修改数组中的任何一个元素值时，都只需要通过下标，找到这个元素值对应位置的DOM元素副本，只修改一个元素即可。不用重建整个列表。这种方法效率高。
-------问题2-------：
为什么必须加:key="i"?
-------解决-------：
给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。也就是说为了增加唯一标识、避免重建列表、只修改受影响的一个元素，所以更新效率高。
七、v-on
专门绑定事件的指令。只要一个元素可能触发事件，都用v-on来绑定事件。
标准：<元素 v-on:事件名="处理函数名(实参值列表)">
简写：<元素 @事件名="处理函数名(实参值列表)">更简写，如果事件处理函数不需要传参，则可以省略() ：<元素 @事件名="处理函数名">
只要界面中定义了几个事件绑定，new Vue()中methods里，就要定义几个同名的方法支持：
new Vue({
el:"#app",
data:{...},
methods:{
处理函数(形参列表){
...this.变量名...
}
}
})
------------------------------------------ 获取事件对象 -------------------------------------------------------
在DOM中，给事件处理函数添加第一个形参。事件发生时，浏览器就会自动将事件对象传递给事件处理函数的第一个形参：event对象
元素.on事件名=function(e){
...e...
}
或
元素.addEventListener("事件名"，function(e){
...e....
})
在Vue中，界面中绑定时千万不要加()。因为加上空的(),表示什么参数都不传！浏览器一旦看到空的(),就不会自动传事件对象了！
<元素 @事件名="处理函数">
methods:{
处理函数(e){
...e和DOM中的e，完全一样!...
}
}
-------问题-------：
本来vue的事件处理函数，是可以传实参值的；但是，要想获取事件对象e，又必须不能加()。
-------解决-------：
在界面中绑定事件处理函数时，要用$event代替事件对象。凡是$开头的都是vue中的关键字，有特殊功能！不能改变！( $event：是提前获得浏览器自动创建的事件对象！)
<元素 @事件名="处理函数($event，其他实参值)">
在new Vue()中：
methods:{
处理函数(e，其他形参)
}
处理函数中$event与实参值的位置没有固定顺序，但是必须和methods中处理函数定义中的形参列表顺序保持一致！
八、v-html
使用{{}}绑定一段HTML内容时，显示在页面上的结果是未解析的原始的HTML内容。只要绑定的是一段HTML内容，都要用v-html代替{{}}。
<元素 v-html="变量或js表达式"></元素>
九、v-cloak和v-text
当网速慢时，new Vue()下载和运行有些延迟，对界面的解析也有些延迟，导致用户短暂看到{{}}语法！
v-cloak 专门在new Vue()加载之前，临时隐藏元素的特殊指令。今后只要希望即使new Vue()加载之前，也不希望用户看到{{}}时，都用v-cloak隐藏。因为v-cloak本身不带任何样式！所以，必须靠我们自定义v-cloak属性选择器，添加隐藏的样式！
css中：[v-cloak]{display:none}
<元素 v-cloak>
v-text 专门代替{{}}绑定元素内容的特殊指令，因为{{}}出现在元素的内容中，一旦解析延迟，用户就会短暂看到{{}}。而v-text是写在元素的开始标签中的属性，即使 new Vue()加载延迟，用户也不可能看到元素的属性！，今后只要想避免用户短暂看到{{}}，都可以用v-text代替{{}}绑定元素的内容。（ 标签之间的内容不用写，因为v-text=后的"变量或表达式"会代替元素内容。）
<元素 v-text="变量或表达式"> </元素>
------------------------------------------v-cloak vs v-html-------------------------------------------------------
v-cloak与v-text解决的问题都是：new Vue()延迟加载时，用户短暂看到{{}}的问题，至于使用哪个更好，没有定论，看个人习惯。
------------------------------------------v-text vs v-html-------------------------------------------------------
v-text和{{}}性质是一样的，如果绑定的内容是一段html片段，则也不会解析，而是原样显示在界面上。所以，不能用v-text来绑定HTML片段内容。v-html可以将原始的HTML片段先解析后，再显示给人看。所以，今后，只要绑定的内容是HTML片段内容，都用v-html。
十、v-once
专门控制一个元素只在首次加载时，动态绑定一次内容。今后，即使变量发生变化，该元素也不更新。今后只要想要一个元素的内容，只需要在首次加载时，动态绑定一次，今后，不再改变，都用v-once来修饰。
<元素 v-once>
凡是带有v-once的元素，只在首次加载时更新内容。并不会被保存到虚拟DOM树。所以，即使将来变量变化，也无法通知到该元素。自然，内容不会再改变。减小了虚拟DOM树的大小，更提高了遍历和查找的效率。
十一、v-pre
专门保护元素内容中的{{}}不被vue编译！如果内容正文中，刚好有{{}},又不想被vue编译时，就可用v-pre来保护。( 内容中的{{}}会原样显示在网页中。)
<元素 v-pre>
十二、v-model
-------问题------：
用传统的:绑定表单元素的value属性，无法自动获得界面上用户输入的新内容。
-------原因------：
其实在vue中有两种绑定方式:
(1). 单向绑定:
a. 可自动将程序中的变化，更新到界面上显示(Model->View)
b. 但是，如果界面中用户修改了内容，则无法将新内容自动更新到程序中的变量中(View ×-> Model)
(2). 双向绑定:
a. 即可以自动将程序中的变化，更新到界面上显示(Model->View)
b. 又可以自动将界面上用户修改的新内容自动更新回程序中的变量中(View -> Model)
-------使用------：
今后，只要在vue中，想获得表单元素的新内容，都用双向绑定！
用于在表单类元素(单选(radio)、多选(checkbox)、下拉选择(select)、输入框(input)等)上双向绑定数据。
<input v-model:value="变量">
View<-Model
View->Model
一般情况下我们默认用户提交的信息为绑定v-mode指令的表单元素的value属性的值；当然这只是一般情况下，实际上用户提交的信息与不同表单类型有关。
---- select -----
1). 先准备好一批写死的option和value值，备选
2). 用户每选择一个option，就会将当前选中的option的value值交给整个select的value属性
3). 所以，应该将v-model绑定在每次都会被改变的select的value属性上
<select v-model:value="变量">
<option value="值1">文本</option>... ...
</select>
---- checkbox ----
不需要value属性，单纯修改checked属性，就可切换两种状态，所以，v-model应该绑定在checked属性上。且绑定的变量只有两种值: true或false.
<input type="checkbox" v-model:checked="变量">
（ 且变量值为bool值）
---- v-model 简写 ----
以上案例中， v-model后的":value"或":checked"，都可省略。v-model可自动根据自己所在的元素判断绑定哪种元素。比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。
<表单元素 v-model="变量">
v-model理解：
v-model指令，能轻松实现表单输入和应用状态之间的双向绑定。获取到用户表单提交的数据，我们通常会使用v-model指令来完成。
v-model属性的值是一个数据的变量。如果数据的值发生变化，会影响input的值，input的值的变化同时影响数据的变化。
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
v-model的作用：
vue中使用过v-model指令来实现表单元素和数据的双向绑定。
将表单中用户提交的信息和程序员设定的变量进行绑定。
区别于v-bind：动态更新HTML元素上的属性的值。
------------------------------------------------------------------------------------------------------------------------------
1. MVVM: 界面View+模型Model+视图模型ViewModel
2. Vue绑定原理: 访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素
3. 虚拟DOM树优点:
(1). 小: 只包含可能变化的元素。
(2). 遍历查找快。
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码。
4. Vue功能3步走:
(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中
5. 总结: 绑定语法+13种指令
(1). 如果元素的内容需要随变量自动变化: {{}}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
（强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。）
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
（优化: 减少虚拟DOM树中元素个数。）
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model