VUE02

(3). v-if和v-else:

a. 什么是: 专门根据一个条件控制两个元素二选一显示
b. 何时: 今后只要两个元素二选一显示时，都用v-if和v-else
c. 如何: 
<元素1 v-if="bool变量或js条件表达式">
<元素2 v-else>
d. 强调: v-if和v-else两个元素必须紧挨着写！中间不能插入任何其它内容！
e. 原理: new Vue()扫描到v-if和v-else这里时，会自动计算变量值或条件表达式的结果。
    1). 如果v-if中的条件表达式计算结果为true，则保留v-if所在的元素，删除v-else所在的元素
    2). 如果v-if中的条件表达式计算结果为false，则删除v-if所在元素，保留v-else所在元素
f. 高频笔试题: v-show和v-if都能控制元素显示隐藏，差别: 
    1). v-show是通过display:none来控制显示隐藏
    2). v-if是通过删除元素来控制显示隐藏
g. 示例: 根据用户的登录状态，显示不同的内容

4_v-if_v-else.html

    





 

 

 

 





 

 


 

 


 

 Welcome dingding | 注销

 

 


 

 登录 | 注册

 

 

 

运行结果：

(4). v-else-if

a. 什么是: 专门和v-if和v-else配合来控制多个元素多选一显示

b. 何时: 只要多个元素多选一显示时

c. 如何:

<元素1 v-if="条件1">

<元素2 v-else-if="条件2">

... ...

<元素n v-else>

d. 强调: v-if  v-else-if  v-else的几个元素必须紧挨着写，中间不能插入其他内容。

e. 原理:

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所在元素显示。

f. 示例: 根据pm25数值选择一张图片显示

5_v-else-if.html

  

运行结果:

(5). v-for

对应小程序视频列表: 小程序->在线->VUE->day01 4. v-for 遍历数组 ...

a. 什么是: 专门根据数组中的元素内容，自动反复生成多个相同结构的但是内容不同的页面元素列表 的指令

b. 何时: 只要在页面中反复生成多个相同结构的元素组成的列表

c. 如何: <要反复生成的元素 v-for="(元素值, 下标) of 数组" :key="下标">

d. 原理:

1). 当new Vue()扫描到v-for时，会自动遍历of后的数组

2). 每遍历数组中的一个元素值，

i. 就自动将当前元素值和当前下标位置保存到of前的两个变量中（顺序不能变）。

ii. 还会自动创建当前v-for所在的元素副本，并用of前的两个变量内容，填充新生成的相同结构的元素副本。

e. 示例: 使用v-for遍历人名数组，并在页面显示人名列表

6_v-for.html

 

 

 

 





 

 


 

 


 
{{i+1}} - {{ename}}

 

 

 

运行结果:

f. 问题: v-for生成的多个相同结构的元素副本除了内容不同之外，元素本身毫无差别！所以，万一数组中某个位置的元素被删除一个，v-for无法知道该精确的删除哪一个页面元素副本，v-for只能采用一个很笨的办法，删除所有副本，重建整个列表！——效率极低！

g. 解决: 今后只要使用v-for反复生成多个相同结构的元素副本时，都要为每个元素副本额外绑定一个专门的属性: :key="不重复的值"，key绑定的值要求必须是唯一的值不能重复

h. 优点: 从此每个元素副本都有一个唯一的标识，当数组中某个位置的元素被删除时，v-for只要根据下标找到对应key值的一个元素对象，删掉即可，其余元素不受影响——效率高！

i: 高频笔试题: v-for为什么必须绑定

答: 如果不绑定:key，则每删除数组中一个元素，v-for都会删除所有元素副本，重建整个列表——修改效率低。绑定:key是给每个元素副本添加一个唯一的标识，在删除数组元素时，可根据唯一标识找到对应的一个元素对象，删除即可，其它元素不受影响——修改效率高！

j: 其实v-for不但可以遍历数字下标的数组，还可遍历自定义下标名称的对象或关联数组。

k. 示例: 遍历对象中每属性，在页面创建属性列表

7_v-for_obj.html

 

 

 

 





 

 


 

 


 
{{key}} : {{value}}

 

 

 

运行结果:

l: 其实: v-for还会数数，v-for可根据给定的一个数字，从1开始依次生成指定数量的元素副本。

    <元素 v-for="i of 整数">
    ![image.png](/img/bVcKCzI)

m: 示例: 使用v-for懂啊提生成一组分页按钮

8_v-for_n.html

  





 

 

 

 

 





 

 


 

 


 
{{i}}

 

 

 

运行结果:

(6). v-on:

对应小程序视频: 小程序->在线->VUE->day02 1. 事件绑定 v-on @...

a. 什么是: 专门为元素绑定事件处理函数的指令

b. 何时: 今后只要为元素绑定事件处理函数都用v-on

c. 如何: 标准:

1). HTML中: <元素 v-on:事件名="处理函数(实参值,...)">

2). new Vue()中methods中: 处理函数(形参变量,...){ ... }

d. 简写: <元素 @事件名="处理函数">

1). v-on: 可用@代替

2). 如果事件处理函数不需要传入实参值，则()可省略！

e. 需求1: 希望触发事件处理函数时可以传入实参值

1). <元素 @事件名="处理函数(实参值, ...)">

methods:{

处理函数(形参变量, ...){ ... }

}

2). 示例: 点哪个div，就喊哪个div疼！

9_v-on.html

 

 

 

 

 





 

 


 

 
成亮

 
李然

 

 

运行结果:

f. 需求2: 希望事件发生时，获得事件对象——同DOM

    1). <元素 @事件名="事件处理函数"> //强调: 只获得事件对象e时，不要加()
        //一旦HTML中加了()，就不再自动传事件对象e了
        methods:{
            //          event
            //           ↓
            事件处理函数(e){ ... }
        }
    2). 示例: 点div哪个位置，就喊哪个位置疼

10_v-on_e.html

      





 

 

 

 

 





 

 


 

 
成亮

 
李然

 

 

运行结果:

g.需求3: 笔试题: 如何既传入自定义实参值，又获得事件对象

1). 错误做法:

<元素 @事件名="处理函数(实参值,...)" //只要HTML中写()

methods:{

event

↓

处理函数(e) //事件发生时就不会自动传入event了

}

2). 正确做法:

DOM event

↓

<元素 @事件名="处理函数(实参值, $event,...)">

methods:{

处理函数(形参变量, e, ...){ ... }

}

其中: $event是vue框架内置的一个关键字(不能改名)，先于事件处理函数获得event对象，包装起来备用。在HTML中传入$event时，和其它实参值没有必然的顺序要求！

3). 示例: 点哪个div的哪个位置，就喊哪个div的哪个位置疼

11_v-on_$event.html

 

 

 

 

 





 

 


 

 

 
成亮

 
李然

 

 

运行结果:

(7). 防止用户短暂看到{{}}

对应小程序视频: 小程序->在线->VUE->day02  2. 其它指令 绑定HTML内容 防止用户短暂看到{{}}

a. 问题: 当网速慢的时候，new Vue()所在的js文件，可能下载延迟，就会让用户短暂看到HTML中的{{}}语法.

b. 解决: 2种:

1). v-cloak指令: //幕布、隐身斗篷

i. 什么是: 专门在new Vue()下载完成前暂时用于隐藏元素的特殊指令

ii. 何时: 今后所有用{{}}绑定的位置，为了防止用户短暂看到{{}}语法，都应该用v-cloak暂时隐藏

iii. 如何: 2步:

①先在网页的style中用属性选择器为所有v-cloak的元素添加display:none属性

②再为要临时隐藏的元素添加v-cloak属性

iv. 原理:

①在new Vue()加载出来之前，[v-cloak]{display:none}发挥作用，找到所有带有v-cloak指令的元素，让他们暂时隐藏

②在new Vue()加载出来之后，new Vue()会自动找到所有v-cloak属性，并删除他们。结果: 原来由于v-cloak属性而隐藏的元素，才显示出来！

v. 问题: 被迫不但要写HTML和js，还要记得去写css，繁琐

2). v-text:

i. 什么是: 专门代替{{}}语法来绑定元素内容的特殊指令

ii. 为什么: {{}}有可能导致用户短暂看到{{}}语法。如果不使用{{}}，而改为使用元素开始标签中的v-text属性。则就算属性值没有加载出来，用户也不可能看到元素开始标签中的属性。

iii. 何时: 其实为了避免用户短暂看到{{}}语法，也可以用v-text来解决

iv. 如何: <元素 v-text="变量或js表达式">  

v. 原理: 当new Vue()扫描到v-text时，会先计算""中的变量值或表达式结果，然后用变量值或表达式的结果，覆盖元素开始标签到结束标签之间的内容

vi. 问题: 如果元素的内容需要写死的部分字符串和动态生成的部分字符串拼接而成！

解决: 那么，就不得不用模板字符串！而不能用{{}}

<元素 v-text="xxxxxx${变量或js表达式}xxxxx">

vii. 问题: ""里再套反引号，写法太繁琐！

解决: 其实有简写: 外围的""可省略，只写反引号``即可

<元素 v-text=xxxxxx${变量或js表达式}xxxxx>

viii. 问题: 在元素的属性中使用模板字符串拼接，可读性差

c. 以上两种情况都有问题: 根据个人喜好用哪个都行！

d. 示例: 分别使用v-cloak和v-text防止用户短暂看到{{}}

12_v-cloak_v-text.html

 

 

 

 

 





 

 


 
用户名: {{uname}}

 


 

 

运行结果:

总结

: this  8种: 判断this，一定不要看定义在哪儿！只看调用时！

1. obj.fun()   this->obj

1. fun() 或 (function(){ ... })() 或 多数回调函数 或 定时器函数 this->window
2. new Fun()   this->new正在创建的新对象

4. 类型名.prototype.共有方法=function(){ ... } this->将来谁调用指谁，同第一种情况

1. 箭头函数中的this->箭头函数外部作用域中的this
2. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

   如果需要使用简化版函数，必须$(this)

3. jQuery.fn.自定义函数=function(){ ... } this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)
4. new Vue()中methods中的函数中的this->当前new Vue()对象

总结:

1. MVVM: 界面View+模型Model+视图模型ViewModel
2. Vue绑定原理: 访问器属性+虚拟DOM树

变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

1. 虚拟DOM树优点:

(1). 小: 只包含可能变化的元素。
(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码

1. Vue功能3步:

(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下:
通常是

b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

总结:

绑定语法+13种指令

1. 如果元素的内容需要随变量自动变化: {{}}
2. 如果元素的属性值需要随变量自动变化: :
3. 控制一个元素显示隐藏: v-show
4. 控制两个元素二选一显示: v-if v-else
5. 多个元素多选一显示: v-if v-else-if v-else
6. 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识"
7. 只要绑定事件: @ $event
8. 防止用户短暂看到{{}}: v-cloak和v-text

今日对应小程序视频列表:

小程序->在线->VUE->day01  3. 绑定语法 {{}} v-bind ...v-show...v-if...
                         4. v-for 遍历数组 ...
小程序->在线->VUE->day02  1. 事件绑定 v-on @...
                          2. 其它指令 绑定HTML内容 防止用户短暂看到{{}}