Vue---内置指令、自定义指令（详细）、全局指令与局部指令

一时失言乱红尘 2024-04-07 12:56 89阅读 0赞

**目录**

一、v-on

二、v-bind、v-model

三、v-if、v-else、v-show、v-for

四、v-text、v-big

五、v-html

六、v-cloak

七、v-once

八、v-pre

九、自定义指令\_函数式

十、自定义指令\_对象式

十一、自定义指令\_总结

1.指令名的问题

2.directives配置中this指向

3.将指令变成全局指令

4.备注

--------------------

##  ##

## 一、v-on ##

绑定事件监听，可以简写为@

具体信息可参照链接：

[z http://t.csdn.cn/tLu8B][z http_t.csdn.cn_tLu8B]

## 二、v-bind、v-model ##

v-bind：单向绑定解析表达式 ：xxx

v-model：双向数据绑定

具体信息可参照链接：

[http://t.csdn.cn/B03jQ][http_t.csdn.cn_B03jQ]

## 三、v-if、v-else、v-show、v-for ##

v-if、v-else:条件渲染，动态控制结点是否存在

v-for：遍历数组、对象、字符串

v-show:条件渲染（动态控制结点是否展示）

具体信息可参照链接：

[http://t.csdn.cn/wpAm5][http_t.csdn.cn_wpAm5]

## 四、v-text、v-big ##

###  ###

但是我们更经常使用插值语法，插值语法更灵活

1.作用：向其所在的节点中渲染文本内容

2.与插值语法的区别：**v-text会替换掉节点中的内容**，\{ \{xx\}\}则不会

备注：**v-text不支持结构的解析！**

![3d94c77875ab4eaea57ae302687603c8.png][]

![8f2b9136b7b7446bb91f9e0aa4452418.png][]

## 五、v-html ##

**支持结构的解析**

作用：向指定节点中渲染包含html结构的内容

与插值语法的区别：

v-html会替换掉节点中所有的内容，\{ \{xx\}\}则不会

v-html可以识别html结构

注意：

**v-html有安全性问题！！！！**

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

一定要在可信的内容上使用v-html，永远不要在用户提交的内容上

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
               <div>你好，{
       {name}}</div>
               <div v-text="name">你好，</div>
               <div v-html="str"></div>
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
                new Vue({
                    el:'#root',
                    data:{
                        name:'尚硅谷',
                        str:'<h3>你好啊！</h3>'
                    },
    
                })
    
            </script>   
        </body>
    </html>

![f9a80b47489c415789602c44e62a9371.png][]

## 六、v-cloak ##

v-cloak指令（没有值）

1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性

2.使用css配合v-cloak可以解决网速慢时页面展示出\{ \{xxx\}\}的问题

下面这个案例，我们把<script>放到body的底部，并且延迟五秒钟

当我们打开页面的时候，就会出现\{ \{name\}\}

为了预防这种情况，我们设计了以下案例， 当【v-cloak】这个属性存在的时候，我们就对有这个属性的变迁进行display，当vue接管实例之后，就会删除v-cloak属性，然后页面中所有有关vue的内容就会显示出来

![c5cad8200fe9463497e554a0df639e43.png][]

## 七、v-once ##

**v-once 是没有值的**

v-once所在节点在初次动态渲染后，就是视为静态内容了

以后数据的该表**不会引起v-once所在结构的更新**，可以用于优化性能

比如下面我们用了之后，点击按钮，我们发现有v-once属性的那个\{ \{n\}\}是不会变得，只有下面当前的n会做出改变

![adff484d971c45c9b4e7743262d1c653.png][]

## 八、v-pre ##

跳过其所在节点的编译过程

可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译（其实就是**vue不会解析他们**了）

![9d4f79a2518947458d10634cd52e2391.png][]

## 九、自定义指令\_函数式 ##

需求1：定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
           
          
            <div id="root">
               <h2>当前的n值是：<span v-text="n"></span></h2>
               <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
               <button @click="n++">点我n+1</button>
            </div>
    
    
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                   n:1,
                },
                directives:{
                    // big函数何时会被调用？
                    // 指令与元素成功绑定时（一开始）
                    //指令所在的模板被重新解析时（data里面的内容，就算不是修改的n，也会调用 
    
                    // 自定义指令的时候，不用写v-
                    // 第一个参数是DOM元素（我们可以随意更改了）
                    // 第二个参数是我们绑定的数据，比如说我们这个时候绑定的就是n
                    big(element,binding){
                        // binding.value 就是指令绑定的n的数值
                      element.innerText =binding.value*10
                      console.log(element,binding.value)
                    }
     
                }
    
            })
    
        </script>   
    </html>

## 十、自定义指令\_对象式 ##

配置对象中常用的三个回调

bind：指令与元素成功绑定时调用

inserted：指令所在元素被插入页面时调用

update指令所在模板结构被重新解析时调用：

需求2：定义一个v-fbind指令，和v-bind功能相似，但可以让其所绑定的input元素默认获取焦点

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
    
            <div id="root">
               <h2>当前的n值是：<span v-text="n"></span></h2>
    
               <button @click="n++">点我n+1</button>
    
               <input type="text" v-fbind:value="n">
            </div>
    
    
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                   n:1,
                },
                directives:{
    
                    fbind:{
                        // 指令与元素成功绑定时（一开始）,执行下面这个
                        bind(element,binding){
                          element.value = binding.value
                        },
                        // 指令所在元素被插入页面时被调用
                        inserted(element,binding){
                          element.focus()
                        },
                        // 指令所在的模板被重新解析时（data里面的内容，就算不是修改的n，也会调用 
                        update(element,binding){
                            element.value = binding.value
                        }
    
                    }
     
                }
    
            })
    
        </script>   
    </html>

![f3943fe072794a68a17c6292ddc2bd15.png][]

## 十一、自定义指令\_总结 ##

### 1.指令名的问题 ###

加入我们定义一个指令v-bigNumber，驼峰命名法，其实在Vue中是不对的，不能这样写

在**Vue中，多个单词之间需要用“-”隔开**，就和俩面截图中一样

除此之外，当我们用“-”隔开之后，下面写函数的时候，一定要写完整（以前我们是简写的方式）

**'big-number'（element,binding）\{\}**

![fa35166399034204b1341fb26088b0cb.png][]

### 2.directives配置中this指向 ###

**指向Window**，而不是vm

### 3.将指令变成全局指令 ###

与过滤器类似

![2398f722c840458fab98c7c111ad5ef2.png][]

![51bfd0be78be4f26a2d5c2a9e2b5c443.png][]

### 4.备注 ###

指令定义时不加 v- 但是在使用 时记得添加

[z http_t.csdn.cn_tLu8B]: http://t.csdn.cn/tLu8B
[http_t.csdn.cn_B03jQ]: http://t.csdn.cn/B03jQ
[http_t.csdn.cn_wpAm5]: http://t.csdn.cn/wpAm5
[3d94c77875ab4eaea57ae302687603c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a44443a9785049228353ffc8acf33bfe.png
[8f2b9136b7b7446bb91f9e0aa4452418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/823947dc7cad47958bdb3a9cd7f0c18c.png
[f9a80b47489c415789602c44e62a9371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4c52afea255a4affab656ab09f7e4047.png
[c5cad8200fe9463497e554a0df639e43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/915a0eed206c45f7980dac0601cee24e.png
[adff484d971c45c9b4e7743262d1c653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c058ed6feb40447cae7065b6ee2ec4db.png
[9d4f79a2518947458d10634cd52e2391.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/abbb0babf8e345098a73bb2b415fc4a3.png
[f3943fe072794a68a17c6292ddc2bd15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9f3cdeb7cabc4e0787e65df4f8c2db84.png
[fa35166399034204b1341fb26088b0cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8447eb0300fa43779bc557ef4687f7d3.png
[2398f722c840458fab98c7c111ad5ef2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e4b6839c2abc4767b7dbae132cad3917.png
[51bfd0be78be4f26a2d5c2a9e2b5c443.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/40c7df8c260c428c833f311d2972b1a1.png