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

我爱布朗熊

已于 2023-12-10 01:19:20 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签：前端 vue.js javascript java html

于 2022-09-04 18:54:42 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126689030

版权

Vue 专栏收录该内容

26 篇文章 9 订阅

订阅专栏

一、内置指令

1.1 v-on

1.2 v-bind v-model

1.3 v-if v-else v-show v-for

一、内置指令

内置指令：Vue的作者给我们定义好的指令

1.1 v-on

查看这篇文章中的“绑定事件”

3.Vue—绑定事件、事件修饰符、键盘事件（详细）_vue全局键盘按下事件-CSDN博客

1.2 v-bind v-model

查看下面这篇文章中的“数据绑定”

2.Vue — 模板语法、数据绑定、el与data的写法、数据代理-CSDN博客

1.3 v-if v-else v-show v-for

查看下面这篇文章中“条件渲染”、“列表渲染”

Vue---条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）_我爱布朗熊的博客-CSDN博客

1.4 v-text

v-text:向其所在的标签插入文本

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

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

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

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

使用示例

    <div id="root">
        <div>{{name}}</div>
        <div v-text="name">你好</div>
    </div>

        new Vue({
            el: "#root",
            data: {
                name: "zhangjignqi"
            }
        })

效果图

name将div中的“你好”替换掉了

1.5 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>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>

1.6 v-cloak

本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

JS堵塞：当第7行代码消耗了5秒钟，其他的代码就出现不了效果

在这五秒钟时间，绿色框中的内容是渲染不到页面上的，粉色的脚本也是不能执行的，一切都在等第七行执行完毕

五秒钟以内浏览器是白色的，在五秒钟后，就会在浏览器出现内容

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

我们把引入的vue.js文件代码放到了body标签的最后一行

然后第13行代码执行耽误了5秒，但是在其上面有一些正常的代码，这五秒内是不会正常解析的。比如11行的代码，会将{{name}}直接展示在页面上

5秒之后，16行之后的代码才能执行，Vue实例进行创建开始渲染界面

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF8" />
    <title>初始vue</title>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>{{name}}</h2>
    </div>
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>

<script type="text/javascript">
    //关闭开发环境时的生产提示
    Vue.config.productionTip = false

    new Vue({
        el: "#root",
        data: {
            name: "你好"
        }
    })
</script>


</html>

当我们打开页面的时候，就会出现{{name}}，几秒后会恢复正常

然后下面了解一下v-cloak属性特性

也就是说Vue没有实例化出来之前，所在的标签是有v-cloak属性的

当Vue实例化出来之后，v-cloak属性就会被删除了

那v-cloak属性有什么作用呢？

我们可以针对有v-cloak属性的标签进行style样式设计

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

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

简单来说：当网速过慢的时候，可以让未经解析的模板不在浏览器进行展示

1.7 v-once

v-once 是没有值的

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

比如下面的n读了，只是读了一次

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

比如下面我们用了之后，点击按钮，我们发现有v-once属性的那个{{n}}是不会变得，只有<h2>标签下的n值会改变

1.8 v-pre

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

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

<h2 v-pre>你好</h2>

下面这种情况会把{{n}}展示在页面上，并不会解析

<h2 v-pre>{{n}}</h2>

二、自定义指令

2.1 函数式

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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
                //binding是指span与v-big之间的关联关系，我们更关注的是绑定的值，也就是binding.value
                big(element,binding){
                  // binding.value 就是指令绑定的n的数值
                  //element.innerText修改元素的文本内容
                  element.innerText =binding.value*10
                  console.log(element,binding.value)
                }
 
            }
 
        })
 
    </script>   
</html>

2.2 对象式

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <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>

2.3 总结

2.3.1 指令名问题

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

在Vue中，多个单词之间需要用“-”隔开

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

directives:{
   'big-number'(element,binding){
       .....
   }
}

2.3.2 directives指向

指向Window，而不是vm

2.3.3 指令变成全局指令

函数的方式

Vue.directive('big',function(element,binding){
    console,log('big',this) //this指向Window
    element.innerTest = binding.value*10
})

指令的方式

<script type="text/javascript">
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip=false

    Vue.directive('big', {
        // 指令与元素成功绑定时（一开始）,执行下面这个
         bind(element,binding){
             element.value = binding.value
         },
         // 指令所在元素被插入页面时被调用
         inserted(element,binding){
             //获取焦点
             element.focus()
          },
          // 指令所在的模板被重新解析时（data里面的内容，就算不是修改的n，也会调用 
           update(element,binding){
              element.value = binding.value
            }
    })

</script>