vue指令

vue指令：13种

1.为什么使用指令：{{}}可让元素的内容随变量自动变化，但是页面中可能发生变化的不止是内容，元素的属性和样式也可能发生变化，但是{{}}只支持内容变化，不支持属性值和样式变化
2.什么是指令：指令就是为HTML元素添加更多的新功能的特殊属性。
3.指令包括：
（1）v-bind:专门让属性值也能根据变量值自动变化
a.如何使用:<元素 v-bind:属性名=“变量或js表达式”>
b. 注意：一旦使用了 v-bind，"“中就不能再加{{}},”“承担了{{}}的作用
c.简写： v-bind可省略，只需要写**😗*即可
如：<元素 :属性名=“变量或js表达式”>
（2） v-show：专门根据一个条件控制一个元素的显示隐藏的指令。
a.如何使用:<元素 v-show=“bool变量或js条件表达式”>
b. 原理: 当new Vue()扫描到v-show时，会自动计算”“中变量或表达式的bool值。 1). 如果计算结果为true，则什么也不做，当前元素默认显示。
（3） v-if和v-else：专门根据一个条件控制两个元素二选一显示
a.如何使用:
<元素1 v-if=“bool变量或js条件表达式”></元素1>
<元素2 v-else></元素2>
b. 注意： v-if和v-else两个元素必须紧挨着写，中间不能插入任何其它内容。
c.原理: new Vue()扫描到v-if和v-else这里时，会自动计算变量值或条件表达式的结果。
1). 如果v-if中的条件表达式计算结果为true，则保留v-if所在的元素，删除v-else所在的元素
2). 如果v-if中的条件表达式计算结果为false，则删除v-if所在元素，保留v-else所在元素
（4） v-else-if： 专门和v-if和v-else配合来控制多个元素多选一显示
a.如何使用:
<元素1 v-if=“条件1”>
<元素2 v-else-if=“条件2”>
… …
<元素n v-else>
b. 注意： v-if v-else-if v-else的几个元素必须紧挨着写，中间不能插入其他内容。
c.原理:
1). 当new Vue()扫描到v-if时，先计算v-if后的变量或条件表达式，如果v-if后的条件为true，则保留v-if删除其它v-else-if和v-else
2). 如果v-if的条件为false，则继续向后扫描每个v-else-if。只要任意一个v-else-if后的条件为true，则删除除该v-else-if之外的其余兄弟元素，只显示当前v-else-if的元素.
3). 如果所有v-if和v-else-if的条件都为false，则删除所有v-if和v-else-if的元素，仅保留v-else所在元素显示。
（5）v-for：专门根据数组中的元素内容，自动反复生成多个相同结构的但是内容不同的页面元素列表 的指令
a.如何使用:<要反复生成的元素 v-for=”(元素值, 下标) of 数组" :key=“下标”>
b. 原理:
1). 当new Vue()扫描到v-for时，会自动遍历of后的数组
2). 每遍历数组中的一个元素值，
i. 就自动将当前元素值和当前下标位置保存到of前的两个变量中（顺序不能变）。
ii. 还会自动创建当前v-for所在的元素副本，并用of前的两个变量内容，填充新生成的相同结构的元素副本。
c.v-for不但可以遍历数字下标的数组，还可遍历自定义下标名称的对象或关联数组。
d. v-for还会数数，v-for可根据给定的一个数字，从1开始依次生成指定数量的元素副本。(<元素 v-for=“i of 整数”>)
（6）v-on:专门为元素绑定事件处理函数的指令
a.如何使用:
1). HTML中: <元素 v-on:事件名=“处理函数(实参值,…)”>
2). new Vue()中methods中: 处理函数(形参变量,…){ … }
b. 简写: <元素 @事件名=“处理函数”>
1). v-on: 可用@代替
2). 如果事件处理函数不需要传入实参值，则()可省略。
（7）v-cloak（幕布、隐身斗篷）：专门在new Vue()下载完成前暂时用于隐藏元素的特殊指令
a.如何使用:2步:
①先在网页的style中用属性选择器为所有v-cloak的元素添加display:none属性

	②再为要临时隐藏的元素添加v-cloak属性
b.原理: 
	①在new Vue()加载出来之前，[v-cloak]{display:none}发挥作用，找到所有带有v-cloak指令的元素，让他们暂时隐藏
	②在new Vue()加载出来之后，new Vue()会自动找到所有v-cloak属性，并删除他们。结果: 原来由于v-cloak属性而隐藏的元素，才显示出来

（8） v-text: 专门代替{{}}语法来绑定元素内容的特殊指令
a.如何使用:<元素 v-text=“变量或js表达式”> </元素>
b.原理: 当new Vue()扫描到v-text时，会先计算""中的变量值或表达式结果，然后用变量值或表达式的结果，覆盖元素开始标签到结束标签之间的内容
（9）v-html：专门绑定HTML代码片段内容的指令
a.原理: v-html绑定的HTML片段内容会先交给浏览器解析后，再显示到页面上给人看。
（10）v-once:只在首次加载时，绑定一次。之后即使变量发生变化，也不自动随之改变
a.原理: v-once标记的元素，只在首次加载页面时动态加载内容。因为之后不再需要动态更新，所以并不加入到虚拟DOM树中，减少了虚拟DOM树中的元素个数。
（11）v-pre：可以保持元素内容中的{{}}不被vue编译的特殊指令
a.何时使用v-pre：只要刚巧在元素的正文中包含{{}}，但是又不想被vue编译，就用v-pre保护
在此之前的绑定语法以及12种指令，都是单向绑定
（12）v-model（双向绑定）：
a.单向绑定：(1).只能将程序中变量的修改自动更新到界面上显示(只能Model->View)
(2). 无法将界面上的修改反向更新回程序中的变量中(无法View->Model)
b.只要希望动态获得界面上用户修改的新值，都要用双向绑定：
(1). 既能将程序中变量的修改自动更新到界面上显示(既能Model->View)
(2). 又能将界面上的修改反向更新回程序中的变量中(又能View->Model)
c.何时使用双向绑定： 只有绑定表单元素时，才需要用到双向绑定。因为只有表单元素的值，用户才能修改。除表单元素之外的其它普通元素(div, h3, p,…)，都不需要双向绑定。因为这些元素用户改不了！
d.如何使用： <表单元素 v-model:value=“变量名”>