• Vue自定义指令=＞局部指令定义及全局指令定义

    自定义指令

    除了核心功能默认内置的指令 ， Vue 也允许注册自定义指令。
    功能： 对页面展示效果功能的扩展 ==> 自定义指令 主要完成的是 页面 DOM 元素
    的操作
    MVVM 设计模式核心思想：
    简化开发者对于 DOM 的操作， vue 基本实现了
    相关操作，基本上不需要完成 DOM 的操作
    vue 简化开发者对于 DOM 的操作，实际上就是 将 DOM 的操作封装成插值表
    达式或者指令
    自定义指令是 vue 提供给开发者 对 DOM 操作的接口（规范化的方法）

    1.局部指令定义

    范围：仅限于定义时关联的 vue 实例的容器中使用
    定义：
    key （ string ）：指令名称 ，定义完成后，页面使用需 v - 前缀调用指令
    Vue . createApp ({
    directives :{ key [ string ]: value [ Fuction ] }
    }) 如果名称为驼峰命名方式 （例如 imgLazy ） , 页面使用时需要转换为 连
    字符 （ v-img-lazy ）
    value （ Function ）： function( el ， binding ， Vnode,preVnode ){} 指
    令执行函数
    el : 调用指令的当前 DOM 对象
    binding : 是一个对象 ，对象中包含了指令构成 参数、修饰符、取值
    ……
    name: 指令名称
    rawName: 指令调用时的表达式
    expression: 指令取值， = 右侧的取值表达式
    arg: 指令参数 , : 后定义的参数名称
    oldArg: 是指令 ：
    后定义的 旧的参数名称
    value: 指令 = 右侧 表达式的计算结果
    oldValue: 指令绑定变量发生变化后，调用该方法时 ，存储的 上次
    的结果值
    modifiers: 指令修饰符，
    . 后定义的修饰符名称
    modifiers 为 Object{ key:value } 类型数据
    key 为修饰符名称， value 取值 为 true
    true 作为 value 表示当前指令被启用
    对象中没有修饰符 key , 表示指令不启用
    当没有修饰符时，表示该对象为空对象
    Vnode ：指令更新后的新虚拟 DOM
    preVnode ：指令更新前的旧虚拟 DOM
    使用： < 标签 v - 自定义指令名 [: 参数 ][. 修饰符 . 修饰符 ……][= 取值 ] > 标签 >
    例：鼠标左键的拖拽
    ​​​​​​​ 
    1. .box{
    2.             background-color: brown;
    3.             width: 100px;
    4.             height: 100px;
    5.             border-radius: 6px;
    6.             box-shadow: 0 0 6px #999;
    7.             cursor: pointer;
    8.         }
    9.     
    12.     <div id="app">
    13.         <p>appp>
    14.         <div class="box" v-drag>div>
    15.     div>
    16.     
    17.   
    18.  
    19.     <script type="module">
    20.         import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
    21.  
    22.         const app = createApp({
    23.             data(){
    24.                 return {
    25.                 
    26.                 }
    27.             }
    28.         })
    29.         // vue3的全局概念不是在同一个环境就都属于vue语法的全局环境；
    30.         // vue3的全局指的是由一个createApp作为全局启动代码，完成多个vue实例的加载，此时对于这些vue实例而言全局环境为创建app
    31.         // 通过应用程序对象的 directive 方法完成一个自定义指令的描述
    32.         // app.directive(指令名,指令的回调执行方法)
    33.         app.directive("drag",function(el){
    34.             el.style.position="absolute";
    35.             el.onmousedown = function(event){
    36.                 if(event.button!=0) return;
    37.                 let ox = event.offsetX;
    38.                 let oy = event.offsetY;
    39.                 el.onmousemove = function(event){
    40.                     let px = event.pageX;
    41.                     let py = event.pageY;
    42.                     el.style.top=(py-oy)+"px";
    43.                     el.style.left=(px-ox)+"px";
    44.                 }
    45.             }
    46.             el.onmouseup = function(){
    47.                 el.onmousemove = null;
    48.             }
    49.         })
    50.         app.mount("#app")
    51.  
    52.        
    53.     script>

    2.全局指令定义

    范围：可以在 vue 的 任意对象的容器中使用
    语法： app.directive( id,definition )
    id=name : 定义指令名称
    definition : 指令的处理函数， function( el ， binding ，
    newVnode,oldVnode ){}
    参数参考 局部指令
    定义： 全局指令定义必须在使用之前 app . directive ( "lazy" , function ( el ， binding ， Vnode , preVnode ){
    }) 
    1.  
    4.     
    5.         
      调用自定义指令test
    6.         
      调用自定义指令test
    7.         
      调用自定义指令test
    8.         
    9.         
    10.