【vue】vue的插值语法及常用指令的应用_02

目录

一. 绑定语法: 学名: 插值语法 Interpolation

二. 指令(directive)

1. v-bind

2. v-show

3. v-if和v-else

4. v-else-if

5. v-for

扩展:this判断—8种指向

⬛ 总结:知识点提炼


【前文回顾】 vue概述及vue的绑定原理_01


【vue】vue的插值语法及常用指令的应用_02_第1张图片

一. 绑定语法: 学名: 插值语法 Interpolation

1. 什么是: 在界面中标记哪里可能发生变化的特殊的语法

2. 何时: 今后,只要一个元素的内容希望随程序自动变化时,都要用绑定来标记

3. 如何: <元素>{{变量名}}

4. 结果:

         (1). 开局, new Vue()扫描到这里时,就会将这个元素保存到虚拟DOM树中

         (2). 当{{}}中的变量在new Vue()中被修改时,虚拟DOM树就会找到这个元素,自动更新这个元素的内容与new Vue()同名变量保持一致!

5. 混搭: 其实在一个元素的内容中, {{变量名}}可以和其他字符串内容混搭。

6. {{}}之中: 和模板字符串的${}规则一样

         (1). 可以写: 变量, 运算, 三目, 调用函数, 创建对象, 访问数组元素——一切合法的有返回值的js表达式

         (2). 不能写: 程序结构(分支和循环), 以及没有返回值的js表达式。

7. 示例: 使用绑定语法绑定多种内容:

2_{{}}.html




  
  
  Document
  


  

用户名:{{uname}}

性别:{{sex==1?"男":"女"}}

单价:¥{{price.toFixed(2)}}

数量:{{count}}

=========================

小计:¥{{(price*count).toFixed(2)}}

下单时间: {{new Date(orderTime).toLocaleString()}}

今天星期{{week[new Date().getDay()]}}

运行结果: 
 

用户名:dingding

性别:男

单价:¥12.50

数量:5

=========================

小计:¥62.50

下单时间: 2020/10/23 上午11:52:28

今天星期五

二. 指令(directive)

◼️ 什么是指令

专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性

◼️ 包括: 13种

1. v-bind

        (1). 问题: 如果希望元素的属性值也随程序自动变化,如果使用{{}},会报错!——{{}}只支持元素内容变化,不支持属性值变化

         (2). 解决: 今后只要希望元素的属性值随程序自动变化,都要用v-bind或:代替{{}}

         (3). 如何:

         a. 标准写法: <元素 v-bind:属性名="变量或js表达式">

         b. 简写: <元素 :属性名="变量或js表达式">

         (4). 结果: 当开局, new Vue()只要扫描到:属性名="变量或js表达式"语法,都会先执行""中的变量或js表达式,获得一个结果值。然后,再自动将结果值,设置为当前属性的属性值!

         (5). 强调: 绑定属性值时,不要加{{}}了!一旦一个属性前加了:,则=后的"",其实就起到了{{}}等效的作用!

         (6). 示例: 根据pm25的数值,动态显示不同表情图片

         3_v-bind.html




  
  
  Document
  


  
  

今日空气质量:

{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}

运行结果: 

【vue】vue的插值语法及常用指令的应用_02_第2张图片

2. v-show

         (1). 什么是: 专门控制一个元素显示隐藏的特殊指令

         (2). 何时: 今后只要想控制一个元素显示隐藏都用v-show

         (3). 如何: <元素 v-show="bool类型变量或js表达式">

         (4). 结果: 每当new Vue()扫描到v-show时,都会先计算""中的变量值或js表达式的值:

         a. 如果=右边的变量值或表达式结果为true,则当前元素什么也不做,默认正常显示

         b. 如果=右边的变量值或表达式结果为false,则new Vue()自动给当前元素加上display:none,当前元素隐藏

         (5). 示例: 实现打开关闭对话框

         4_v-show.html



  
    
    
    Document
    
    
  
  
    
    
×

登录成功!

运行结果: 
 

【vue】vue的插值语法及常用指令的应用_02_第3张图片

【vue】vue的插值语法及常用指令的应用_02_第4张图片

【vue】vue的插值语法及常用指令的应用_02_第5张图片

3. v-if和v-else

        (1). 问题:如果两个元素都要控制显示隐藏,而且根据同一个条件二选一显示隐藏。如果用v-show做,被迫把条件写2遍!

        (2). 解决: 今后,只要控制2个元素二选一显示,都用v-if和v-else

        (3). 如何:

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

         <元素2 v-else>

         强调:

         a. v-if和v-else所在的两个元素必须连着写!中间不能插入任何其他元素!

         b. v-else后一定不要写条件!

        (4). 原理: 每当new Vue()扫描到v-if时,会先执行=右边的判断条件:

         a. 如果判断条件为true,则保留v-if所在的元素,删除v-else所在的元素

         b. 如果判断条件为false,则删除v-if所在的元素,保留v-else所在的元素

        (5). v-show  vs  v-if 差别:   高频面试题

         a.  v-show 用display:none隐藏元素

         b. v-if v-else 用删除元素方式隐藏元素

         (6). 问题: v-if或v-else被删除的元素,怎么又重新回到页面的.

                  答: 虽然DOM树中的元素被删除了,但是虚拟DOM树中的元素,没有被删除。

【vue】vue的插值语法及常用指令的应用_02_第6张图片

        (7). 示例: 切换用户登录和注销状态

         5_v-if_v-else.html



  
    
    
    Document
    
  
  
    
    

Welcome, dingding | 注销

运行结果: 

【vue】vue的插值语法及常用指令的应用_02_第7张图片 ​​​​​​

【vue】vue的插值语法及常用指令的应用_02_第8张图片

【vue】vue的插值语法及常用指令的应用_02_第9张图片

扩展:Vue.js条件判断(v-if 和 v-show)
 

v-if和v-else

v-if 可以配合v-else使用,也可以单独使用 。当配合v-else使用时,加有v-else的标签要紧跟加有v-if的标签之后,中间如果穿插其他标签,v-else将永远不会显示出来,并会报错!

如果v-if后面跟的是布尔值,而非变量语句的时候,可以根据布尔值真假判断显示和不显示 ,舍弃v-else 用v-if="flag" 配合 v-if="!flag"来解决中间不可以穿插其他标签的问题,可见v-if 配合v-else使用非常有局限性!
 

 v-if和v-show的区别

v-if底层控制的是节点的添加和删除,v-if一旦为假,带有v-if 的标签将不复存在,而v-show底层控制的是标签样式的显示和隐藏,并不会删除标签节点!

4. v-else-if

         (1). 何时: 今后只要多个元素, 多选一显示隐藏,就可用v-else-if和v-if、v-else配合实现

         (2). 如何:

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

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

         ... ...

         <元素n v-else>

         a. v-if、v-else-if和 v-else所在的多个元素必须连着写!中间不能插入任何其他元素!

         b. v-else后一定不要写条件!

         (3). 原理:

         a. 每当new Vue()扫描到v-if时,会先执行=右边的判断条件。如果判断条件为true,则保留v-if所在的元素,删除除v-if之外的其余元素

         b. 如果判断条件为false,则继续向后判断后续v-else-if后的条件。如果任意一个v-else-if的条件为true,则保留这个v-else-if所在的元素,删除其余元素

         c. 如果所有v-if和v-else-if的条件都不满足,则只保留v-else所在的元素,删除其余元素。

         (4). 示例: 根据pm25数值,显示不同表情

         6_v-else-if.html



  
    
    
    Document
    
  
  
    
    

今日空气质量:

运行结果:
 

【vue】vue的插值语法及常用指令的应用_02_第10张图片

5. v-for

         (1). 什么是: 专门反复生成多个相同结构的元素的特殊指令。

         (2). 何时: 今后只要在网页上,反复生成多个相同结构,但是内容不同的一组元素时,都用v-for

         (3). 如何:

         <要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组" :key="i">

         (4). 原理:

         a. 当new Vue()扫描到v-for时,先遍历of后的数组中每个元素

         b. 每遍历一个数组元素,就会自动创建当前元素的一个副本。

         c. 每次遍历时,都会取出当前数组元素值和当前下标位置,保存到of前的两个变量中:

                  1). of前的第一个变量,自动接住当前元素值

                  2). of前的第二个变量,自动接住当前下标位置

         d. of前的两个变量,在当前元素范围内,可用于绑定语法或指令中,动态生成内容!

【vue】vue的插值语法及常用指令的应用_02_第11张图片

         e. 坑: Vue中禁止使用下标,修改数组中的元素值。

                  原因: 数组的下标是数字,Vue只能监控自定义名称的属性,无法监控数字下标!

                  解决: 今后只要修改数组的内容,都必须用数组API修改。因为数组的所有API都是受到vue监控的。

                  比如: vm.数组[i]=新值  错误!页面不会改变

                          vm.数组.splice(i,1,新值) 正确

                          //       先删除i位置的一个旧元素,再在i位置添加一个新元素——替换

                          //复习第一阶段的数组函数

         f. 问题: v-for反复创建的多个元素,除了内容不同之外,默认没有任何差别!如果我们用程序修改了数组中某一个元素时,v-for不知道该对应修改哪个元素副本。于是,就会采用最笨的方法——删除所有旧元素,重新遍历整个数组,并重建整个列表。——效率极低

         g. 解决: 今后只要使用v-for,都必须同时绑定:key="i"属性。

         h. 结果:

                  1). 从此,v-for生成的每个元素副本身上,都多了一个唯一的标识key。值是不重复的。

                  2). 修改数组中任何一个元素值时,都只需要通过下标,找到这个元素值对应位置的DOM元素副本,只修改一个元素即可。不用重建整个列表。——效率高

【vue】vue的插值语法及常用指令的应用_02_第12张图片

         7_v-for.html 



  
    
    
    Document
    
  
  
    
  • {{i+1}} - {{n}}

运行结果:

【vue】vue的插值语法及常用指令的应用_02_第13张图片

高频面试题:

强调:为什么必须加:key="i"?给每个元素副本添加唯一标识。修改数组中某个元素值时,避免重建整个列表,只需要修改一个DOM元素副本即可!提高修改效率。也就是说为了增加唯一标识、避免重建列表、只修改受影响的一个元素,所以更新效率高

         i. 其实: v-for不但可以遍历数组,还可以遍历对象,类数组对象等等——看小程序视频

         j. 其实: v-for还会数数:

         <元素 v-for="i of 整数">

         k. 原理: v-for会从1开始,数数,每次递增1,直到给定的整数位置。每数一个数,就会自动创建一个元素的副本。

        8_v-for2.html



  
    
    
    Document
    
    
  
  
    
  • {{i}}

运行结果:

【vue】vue的插值语法及常用指令的应用_02_第14张图片

 ⚓ 更多常用指令 

扩展:this判断—8种指向

this  8种指向: 判断this,一定不要看定义在哪儿!只看调用时!

➡️ 1. obj.fun()   this->obj

➡️ 2. fun() 或 (function(){ ... })() 或 多数回调函数 或 定时器函数   this->window

➡️ 3. new Fun()   this->new正在创建的新对象

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

➡️ 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

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

➡️ 6. 箭头函数中的this->箭头函数外部作用域中的this

➡️ 7. jQuery.fn.自定义函数=function(){ ... }   this->将来调用这个自定义函数的.前的jQuery子对象,不用再$(this)

➡️ 8. new Vue()中methods中的函数中的this->当前new Vue()对象 

⬛ 总结:知识点提炼

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元素副本即可!提高修改效率。

待续...


 【后文传送门】 vue的常用指令及用法总结(续)_03 


​​

如果这篇【文章】有帮助到你,希望可以给【青春木鱼】点个,创作不易,相比官方的陈述,我更喜欢用【通俗易懂】的文笔去讲解每一个知识点,如果有对【前端技术】感兴趣的小可爱,也欢迎关注❤️❤️❤️青春木鱼❤️❤️❤️,我将会给你带来巨大的【收获与惊喜】

你可能感兴趣的:(#,⭐,Vue.js入门基础,vue.js,javascript,html,vue指令,前端框架)