指令:为HTML添加新功能的特殊属性

429 阅读7分钟

1.v-bind

(1).问题 如果元素的属性值可能随变量自动变化,则不能用{{}}

(2).解决 a.标准 <元素 v-bind:属性名 = "js表达式">

b.原理

new Vue()在扫描页面时,只要发现v-bind,就会自动计算=""中的js表达式,并将计算结果自动设置为当前属性的属性值
c.简写 <元素 :属性名 = "js表达式"> d.强调 如果属性名前加 : ,则 = 后 "" 中不需要在写{{}},""就充当了{{}}的作用!原来{{}}中能写什么,""中就写什么! (3).总结 只要元素的属性值可能随变量自动变化时,都用:属性名="js表达式"方式来绑定,不能用{{}}

2.v-show(控制一个元素的显示隐藏)

  1. 需求:控制一个元素的显示隐藏;
  2. 如何: <元素 v-show="返回bool类型的js表达式"> 原理:
a.new Vue()扫描到v-show时,就会先自动计算=后的js表达式的值,得到一个bool值;
b.如果执行结果为true,则当前元素什么都不干,默认显示!
c.如果执行结果为false,则当前元素自动添加display:none,隐藏

3.v-if 和 v-else(两个元素二选一显示)

  1. 需求:两个元素二选一显示
  2. 如何: <元素1 v-if="返回bool值的表达式"> <元素2 v-else>
  3. 强调:a.v-if和v-else两个元素碧玺紧挨着,中间不能插入其他元素 | b.v-else后不能加任何=,和程序中if else的else后不加表达式道理一样
  4. 原理:a.new Vue()扫描到v-if时,先自动计算=后的表达式的值 | b.如果v-if后表达式的值为true,则保留v-if所在的元素1,删除v-else所在的元素2 | c.如果v-if后表达式的值为false,则删除v-if所在的元素1,保留v-else所在的元素2
  5. v-show和v-if的差别:a.v-show通过display:none的方式控制显示隐藏,因为不修改DOM树,所以效率略高 | b.v-if通过删除元素方式控制显示隐藏,所以要修改DOM树,效率略低

4. v-else-if(多个元素多选一显示)

  1. 需求:多个元素多选一显示
  2. 如何:<元素1 v-if="返回bool值的表达式"> <元素2 v-else-if="返回bool值的表达式">.... <元素n v-else>
  3. 强调:a.v-if,v-else-if和v-else多个元素必须紧挨着,中间不能插入其他元素|b.v-else后不要加任何=,和程序中if else的else后不加表达式道理一样
  4. 原理:
a.new vue()扫描页面时,如果遇到v-if就先执行=后的表达式,获得bool值结果
b.如果v-if表达式的值返回true,则保留v-if,删除其余v-else-if和v-else的元素
c.如果v-if表达式的值返回false,则先后继续执行后续v-else-if的表达式,只要碰到一个v-else-if表达式的值为true,则仅保留v-else-if的元素,删除其余v-if v-else-if 和 v-else 
d.如果之前的v-if和v-else-if的表达式值都为false,才保留最后一个v-else元素,删除其余v-if和v-else-if的元素

5.v-for

根据数组中的内容反复生成多个相同结构的元素

  1. 需求:根据数组中的内容反复生成多个相同结构的元素
  2. 如何:<要反复生成的元素 v-for="(value,i) of 数组/对象">
  3. 强调
a.要反复生成的元素,只要写一个当模板即可!
b.v-for一定要写在反复生成的元素上,而不是要反复生成的元素的父元素上
c.v-for of,即可遍历数组,又可以遍历对象-- 统一了for infor of

2021-05-31_172342.png 4.原理

a.new Vue()扫描到v-for,会自动遍历of后的数组或对象
b.每遍历到数组中一个元素或对象中一个成员,都将当前html元素自动创建一个新的副本
c.在要反复生成的元素身上或其子元素中,可以将v-for的两个变量valuei用于动态绑定内容,其中:value变量会自动获得当前正在遍历的元素值或属性值,i会自动获得当前数组元素的下标或对象成员的属性

2021-05-31_174836.png

5.强调:凡是用v-for时,必须同时绑定一个:key属性

a.问题:因为v-for每次反复生成的元素之间除了内容之外,单看元素是五差别的,即使将来知更改了数组中一个元素值,因为v-for无法区分反复生成的多个元素,就无法只精准更新一个元素,v-for只能采用笨办法,将v-for负责的所有元素重新生成一遍.--效率极低
b.解决:让v-for反复生成的每个元素都有唯一的标识,如果数组中每个元素发生变化,v-for可凭借着唯一的标识找到一个页面的元素,只更新一个页面即可,其余页面保持不变--效率高!
c.如何:`<要反复生成的元素 v-for="(值,下标) of 数组或对象" :key="下标">`

6.V-for 还能数数!

a.<要反复生成的元素 v-for="i of 一个整数" :key="i">

b.原理:

1).V-for1开始循环,每次递增1,到of后给的整数值结束.
相当于for(var i=1;i<=一个整数;i++){...}
2).每循环一次就将当前元素创建一个新的副本
3).变量i会一次接住每次+1后的新值,变量i可用于元素内容中的绑定语法

6.v-on:事件绑定

(1).如何:

a.标准:<元素 v-on:事件名="处理函数名(实参值)">
b.简写:
    1).<元素 @事件名="处理函数名(实参值)">
    2).如果处理函数不需要实参值,则()可省略:<元素 @事件名="处理函数名">
c.页面所需要的所有事件处理函数都应该集中定义在methods对象中

(2).Vue中如何获得事件对象:(Vue中如何获得鼠标点击位置)

a.如果只获取事件对象,不需要传入其他实参值时:同DOM
          <元素 @事件名="处理函数">
          methods:{
               //自动创建event对象
               
               处理函数(e){
               //e得到的事件对象和DOM中的事件对象完全一样
          }
        }

b.即想用事件对象,又要传入自定义实参值:
    1).错误做法1:
    <元素 @事件名="处理函数(实参值)">
           methods:{
           处理函数(形参1,e){
               //虽然实参值可以传进来,但是e就无法获得了!        
           }
         }
     2).错误2:
     <元素 @事件名="处理函数(实参值)">
     
              methods:{
                     //实参值放在第一个位置,形参却定义在第二个位置!位置就不对!
                           处理函数(e,形参1){
                           
                           }
              
              }
      3).正确:手动使用vue提供的$event关键词代替e.手动传参
      i:$event:vue自动封装的保存DOM事件对象的一个特殊关键词,可用以传参!
      ii:如何:
       //当事件发生时,vue自动封装"DOM事件对象e"
       <元素 @事件名="处理函数($event,实参值)">
       methods:{
       处理函数(e,形参1){
              //e得到的就是DOM中的事件对象,用法也和DOM中一样
       }
     }
     强调:处理函数中$event与实参值的位置没有固定顺序,但是必须和methdos中处理函数定义中的形参列顺序保持一致!

7.v-html(绑定的变量值是一段HTML代码)

  1. 问题:如果要绑定的变量值是一段HTML代码,则使用{{}}绑定,会保持html代码的原样,而不经过编译,直接显示在页面中
  2. 解决:今后,只要绑定的变量值是一段HTML代码,则必须用v-html指令代替{{}}来绑定
  3. 如何:<元素 v-html="变量或js表达式"> </元素>
  4. 优点:v-html 会先将变量中的HTML片段交给浏览器解析成可以看的东西,然后才替换进元素的内容中

8.v-cloak和v-text(防止用户短暂看到{{}})

  1. 问题:当网速慢时,如果js代码还未下载执行,则用户有可能短暂看到页面上的{{}}语法
  2. 解决:2个办法:
a.v-cloak指令:
    1).原理:在new Vue()下载执行前,先将所有带{{}}的元素暂时隐藏,
    等到new Vue()下载执行完,再自动将所有{{}}的元素显示出来
    2).2步:
    i.先在网页的style中定义一个属性选择器:[v-cloak]{display:none},
    意为所有带有v-cloak属性的元素,暂时隐藏
    ii:在有{{}}内容的元素上加上v-cloak属性,不用加=
    3).结果:所有带有v-cloak的元素,都暂时隐藏,直到new Vue()下载并执行完,
    自动找到所有v-cloak的元素,删除v-cloak属性,这些元素才显示出来!
b.v-text指令:
   1).原理:既然不想看到{{}},就可以用一种特殊的指令代替{{}},
   功能还一样!因为指令就是写在元素的属性中,即使没有加载完,
   用户也不可能看到元素的属性!
   2).如何:1步
   i.<元素 v-text="变量或js表达式"> </元素>
   ii.原理:当v-text的内容计算好之后,会自动将执行后的结果代替元素的内容
   3).问题:如果元素的内容就是由固定的内容和变化的变量拼接起来的,
   则被迫使用模板字符串!   <元素 v-text="`模板字符串`"> </元素>
   4).简写:如果v-text后跟的是一个模板字符串,则可以省略"",
   只保留模板字符串的反引号``即可!<元素 v-text=`模板字符串`></元素>

9.v-once(绑定只在首次加载时,修改一次)

  1. 问题:有些绑定只在首次加载时,修改一次.之后其他地方的修改,都不影响这里的显示结果,如果一个元素之后不需要再更新,但是却占着虚拟DOM树中一个位置,会影响虚拟DOM树的遍历速度!
  2. 优化:如果只在首次加载时显示,之后其他地方修改,这里都不会受影响的绑定,可用v-once绑定
  3. 如何:<元素 v-once>{{变量或js表达式}}</元素>
  4. 原理:只在首次渲染页面时,替换元素的绑定语法内容,但是不会将当前元素加入虚拟DOM树.结果:只在首次加载一次,之后都不会在改变

10.v-pre({{}}不想被vue编译)

1. 极端的问题:如果元素的内容正文刚好也包含{{}},但是不想被vue编译,而是原样显示!
2.<元素 v-pre>..{{xxxx}}...</元素>