Vue（三）Vue中的常用指令（全网最全）

目录

一、指令

二、Vue中的常用内置指令

        1）v-show

         2）v-if

         3）v-if，v-else

        4）v-if-else-if

        5）v-for

        6）v-on

        7）v-html（解析html标签）

        8）v-cloak和v-text（即使遇到标签，也原样输出）

         9）v-once

         10）v-pre

 三、自定义指令

四、ref索引

---

一、指令

        Vue中什么是指令？

        在表现形式上，就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。因此，帮我们在实际开发中做了减法。

二、Vue中的常用内置指令

        1）v-show

        专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时，都用v-show。

        原理：只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为style="display:none"，表示当前元素隐藏。

    

        隐藏
        显示
        切换
        
Hello Vue!
    
    

         2）v-if

        专门控制两个元素二选一显示，当要在两个元素之间选择一个时，就用v-if和v-else。

        原理：当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值，如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素，删除v-else所在元素；如果v-if等号右边条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。根据条件来加载元素。

    

        删除
        添加
        
        
灰太狼来了！
    
    

小结：Vue中隐藏元素的方式有哪些？他们有什么区别？分别有什么用途？（面试题）
        1）Vue中 v-show 和 v-if 都能实现元素的隐藏操作；

        2）差异：

                v-show：利用css的display='none'实现隐藏

                v-if：利用 DOM 元素的移除，实现隐藏

        3）用途：

                v-show：适合频繁切换显示的场景

                v-if：移除/增加 DOM，消耗高，会降低页面的性能，适合一次性使用的场景

           eg：之后我们的数据都来源于网络，假设发送请求需要1s，则 在请求完毕前，先隐藏一部分页面，请求完成后再显示。

         3）v-if，v-else

        也是用来控制元素的显示与消失，需要注意的是：当使用了v-if=‘true’的元素显示时，则使用v-else的元素不会显示；当使用了v-if=‘false’的元素不显示时，则使用了v-else的元素会显示。

        通过一个模拟请求数据的案例，来说明：

    

        请求数据....
        
        
加载中...
        
        

            
请求数据已到达...显示中....
            
{{skills}}
        
    
    

        4）v-if-else-if

        和v-if和v-else一起控制多个元素多选一显示隐藏，只要控制多个元素选择一个显示隐藏时，都用v-else-if。

    

        
        
        
        
        
红太狼的怒气值:{{score}}
        -10
        +10
        
揍灰太狼！！
        
骂灰太狼！
        
抓羊！
        
给灰太狼做饭
    
    

        原理：当new Vue()扫描到v-if时，先计算v-if后的条件，如果v-if条件为true，则保留v-if所在元素，删除其余v-else-if、v-else元素；如果v-if条件为false，则先删除v-if所在元素，然后，继续计算每个v-else-if后的条件；如果任意一个v-else-if的条件为true，则只保留着一个v-else-if所在元素，删除其余v-if、v-else-if和v-else元素；如果所有v-if和v-else-if的条件都不满足，则只保留v-else，删除其余v-if和v-else-if的元素。

        5）v-for

        专门在网页中根据一个数组或对象的成员，连续生成多个结构相同，内容不同的一组html元素的特殊指令，只要连续生成一组结构相同，但是内容不同的HTML元素时，都用v-for批量生成。

    

        
        {{value}}
        {{a}}
    
    

        原理：每当new Vue()扫描到v-for时，先遍历数组或对象中每个成员；每遍历一个成员，取出当前成员的属性名和属性值，将属性值交给of前的()中第一个变量，将属性名/下标交给of前的()中第二个变量；同时会自动创建当前v-for所在元素的一个新副本，数组或对象包含几个成员v-for就会反复创建几个HTML元素副本。

<要反复生成的元素  v-for="(元素值, 下标) of 数组">
<要反复生成的元素  v-for="(属性值, 属性名) of 对象">

    注意：

• v-for只需一个元素当模板
• v-for统一了js中的for in和for of的功能
• vue中的v-for既可以遍历索引数组，又可以遍历对象
• 在 v-for 中，下标和属性名可以省略不写，但是如果需要序号或者属性名时，可以加上

        of前的两个变量，虽然没有在new Vue()的data中的定义，但可以在v-for所在元素及其子元素范围内用于绑定语法和指令。

下面是一个通过v-for向页面中遍历数组的案例：

    

        
        {{value}}
        {{a}}
    
    

         v-for本身也存在一些问题， 即使只修改了数组或对象中一个成员的值，v-for默认也会删除所有元素副本，重新遍历和创建创建HTML元素副本，这样效率极低。

        这是因为v-for生成的多个HTML元素副本，除了内容不同之外，元素本身没有任何差别，所以v-for每次只能删除所有HTML副本，再重建整个列表。

        解决：只要使用v-for都必须同时绑定一个专门的属性： :key="不重复的值"。

        拥有key值之后，v-for就可以通过key属性值来鉴别每个HTML元素副本不同，修改时只要修改某一个key的元素即可，不用重建整个列表。

v-for为什么必须加 :key（面试题）：

        a.为每个元素添加唯一标识；

        b.避免重建整个列表；

        c.提高修改的效率。

 拓展1：

        在 v-for 中，还提供了遍历数字的语法（在 in/of 后面直接写一个数字，可以直接遍历并使用它）。

鲁班{{n}}号

拓展2：如何解决v-for中:key的静态报错问题？

        出现的原因：由于我们使用的VScode能够快捷生成v-for的基本结构，其中会自带 :key这个属性，但是如果你不写值，VScode会自动解析代码，它会认为你的代码是错误的，从而产生静态报错，但是不会影响程序的执行。

        解决方法：

        1）如果不需要使用 :key 这个属性，直接删掉这个属性就可以了，但是需要每次都删掉它，比较麻烦；

        2）“设置”- > 搜索 vetur.validation.template 把勾选去掉（之后VScode就不因为 :key 的问题误报了）  

        6）v-on

        v-on是Vue1中常用的绑定事件的指令，只要在vue中要给元素绑定事件处理函数，都用v-on，在Vue2中，直接用@代替。

<元素 v-on:事件名="事件处理函数(实参值,...)"
 
//简写:
//所有v-on，都可简写@: 
<元素 @事件名="事件处理函数(实参值,...)"
 
//如果事件处理函数不需要传实参值，则可以省略()
<元素 @事件名="事件处理函数"
 
//传参: vue中事件处理函数，可以传实参值:
<元素 @事件名="事件处理函数(实参值1, 实参值2,...)"
 
   methods:{
    事件处理函数(形参1, 形参2, ...){ 
      }
    }

        在vue中获得事件对象e：

<元素 @事件名="事件处理函数" //一定不要加()
 
    methods:{
      事件处理函数(e){ } //e指代event
    }

        如果既想传实参值，又想获得事件对象，就要借助于vue中的一个关键字$event，专门在vue中提前获得事件对象。

<元素 @事件名="事件处理函数($event, 其它实参, ...)"
 
     methods:{
       事件处理函数(e, 形参,...){
         e->event //结果是一样的
       }
     }

        在事件触发时，$event关键字会提前获得事件对象event，再由vue框架代为转交给事件处理函数对应的形参变量；只要使用$event关键字获得事件对象，则参数顺序无所谓，只要形参和实参可以对应即可。

        7）v-html（解析html标签）

        专门绑定一段HTML代码片段到页面上的特殊指令，如果要绑定的内容是一段包含HTML内容的代码片段时，都用用v-html。

        直接使用{{ }}中绑定的HTML代码片段，{{ }}不会将代码片段交给浏览器解析，而是原样显示到页面；这样就可用v-html代替{{ }}，v-html指令底层相当于DOM中的innerHTML，会先将HTML片段交给浏览器解析，将解析后文本显示到页面。

<元素 v-html="变量或表达式">

        还要注意：v-html不能将写死的部分字符串和变化的变量轻易拼接，必须使用js中的模板字符串才能拼接。

    

        
这本书是: {{msg}}
        

    
    

        8）v-cloak和v-text（即使遇到标签，也原样输出）

         当网速慢时，new Vue()有可能延迟加载，用户就有可能短暂看到页面上的{{ }}语法。这个时候就可以用到v-cloak和v-text：

        （1）v-cloak

        专门在new Vue()加载之前，暂时隐藏部分元素的特殊指令，如果希望在new Vue()加载完之前，暂时隐藏部分元素，避免用户短暂看到{{ }}，都可以用v-cloak。

1、在css中用属性选择器，选择所有带有v-cloak属性的元素，使用display:none，手工隐藏这些元素

2、用法：<要暂时隐藏的元素 v-cloak>

         原理：在new Vue()加载完之前，v-cloak和css中的属性选择器[v-cloak]联合发挥作用，隐藏部分元素，当new Vue()加载完之后，会自动查找页面中所有v-cloak的元素，自动删除所有v-cloak属性。

        （2）v-text

        专门代替{{ }}绑定元素内容的特殊指令，只要不想让用户短暂看到{{ }}，都可用v-text代替{{ }}。        

用法：<要隐藏的元素 v-text="变量或表达式">

        注意如果v-text的内容由需要部分写死的文本和变化的内容拼接而成，必须用模板字符串 。 

小结：对比v-cloak和v-text： 

• 只需在父元素上添加v-cloak，就可以批量隐藏元素，
• 使用v-text时如果需要隐藏的元素过多则需重复使用；所以推荐使用v-cloak。

         9）v-once

         专门控制一个元素只在首次加载时绑定一次，之后即使变量值改变，也不会自动更新页面；如果一个元素的内容，只会在首次加载时绑定一次，之后几乎不会改变时，都用v-once标记。

<元素 v-once>{{...}}

        原理：凡是标有v-once的元素，new Vue()只在首次挂载时，动态更新元素的内容，但不会将v-once的元素加入到虚拟DOM树中，所以将来就算变量值发生变化，也无法通知到这个元素。

        凡是标有v-once的元素，都不会加入虚拟DOM树中，所以减少了虚拟DOM树中的元素的个数，虚拟DOM树遍历更快，效率更高。

举个栗子：

    

        
        {{num}}
        
        
{{num}}
    
    

效果如下：

        通过代码可以看出，加了 v-once 的标签，数据不会发生变化。

         10）v-pre

        专门阻止vue编译内容中的{{ }}的特殊指令，在极少数情况下，正文中包含了不希望被vue编译的{{ }}时，采用v-pre保护。原样输出，包括{{}}。

举个栗子：

    

        
{{msg}}
    
    

效果如下：

 三、自定义指令

        如果希望在开始时就能对HTML元素执行一些初始化DOM操作(如自动获得焦点)，但是vue中没有提供对应功能的指令。这时就可以自定义指令。

创建自定义指令

1、directives属性：用来存储自定义指令

2、在使用自定义指令是，用 ”v-“ 开头

3、在创建自定义指令时，不用写 v- 

4、在创建自定义指令时，有两个固定的参数：

    （1）el：指的是指令所在的元素（能够用来快速找到元素）

    （2）binding：与此指令绑定的相关值（传的值）

指令的本质：代替DOM的选择器，可以快速查找到元素，然后自动触发。

    

        
        
喜羊羊
        
        
喜羊羊
        
        
    
    

注意：自定义指令写在HTML中，而HTML只认识小写字母，所以不能使用驼峰命名法，如果包含多个单词，可以用”-“隔开。 

原理：Vue.directive()是创建一个自定义指令对象，保存在Vue类型的内存中备用。new Vue()扫描时，发现v-开头的自定义指令，就去Vue内存中找同名的自定义指令，找到同名的自定义指令，就自动执行自定义指令对象中的inserted()函数，并将当前扫描到的带有自定义指令的元素对象传给inserted()的形参变量；在inserted()函数内，可对当前传入的带有自定义指令的DOM元素应用原生的DOM操作。

自定义属性传值

        为了便于我们使用，可以使用一个同样的自定义指令，通过改变属性值，来快速操作DOM元素。

    

        
        
美羊羊
        
美羊羊
        
美羊羊
    
    

四、ref索引

          ref：索引，代替DOM查找器，快速找到指定的DOM元素。 

ref：是将dom元素绑定到Vue身上的refs上，里面包含了这个元素所有的属性，后期我们也能通过这中方式进行组件间的传参。

ref与自定义指令的差异：

     自定义指令是 自动 触发的；ref是 手动 触发的。

     自定义指令的方法需要专门写在 directives 中；ref的方法是需要写在 methods 中即可。

案例：通过点击按钮，输入框获取焦点

    

        点我试试