首页 > 其他分享 >Vue 自定义指令

Vue 自定义指令

时间:2024-08-19 20:15:31浏览次数:11  
标签:el Vue 自定义 元素 focus 指令

除了核心功能默认内置的指令v-model 和 v-show vue也允许注册自定义指令。 注意,在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通Dom元素进行底层操作,这时候就会用到自定义指令。 有两种方式定义自定义指令,
一:局部定义自定义指令

        1、局部自定义指令 
            在vue实例配置项中,通过directives
            directives:{
                //可以定义多个指令名
                指令名:{
                    //当元素插入到文档中的时候,执行某个操作
                    inserted(el){//el就是指令所在的元素
                        //对el进行dom操作
                    }
                }
            }

二:全局定义自定义指令

        Vue.directive('指令名',{
            //当元素插入到文档中的时候,执行某个操作
            inserted(el){//el就是指令所在的元素
                //对el进行dom操作
            }
        })
        <p>自定义指令自动获取焦点</p>
        <input type="text" v-focus>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.directive('focus', {
            inserted(el){//这里的el参数代表指令所挂载的dom元素
                el.focus();
            }
        })
        let vm = new Vue({
            el : "#app",
            data : {
                
            }
        })

一个指定指令对象还可以执行钩子函数,就是执行到某个阶段时执行的函数:

具体有如下的钩子函数:

            Vue.directive('focus',{
                //注意,这些函数中的第一个参数,永远是el,表示被绑定了指定的园墅,是一个原生的js对象
                bind(){},//每当指令绑定到元素上的时候,会立即执行这个bind函数,而且只执行一次。一般在这里进行一次性的初始化的样式操作
                inserted(){},//当绑定的元素插入到DOM中时执行
update(){},//当节点更新是,会执行,可能被执行多次 })

如下是bind的例子,来初始化某个样式:

        Vue.directive('focus', {
            bind(el) {
                el.style.color = 'red';
                el.style.width = '240px';
                el.style.height = '40px';
            },
            inserted(el){//这里的el参数代表指令所挂载的dom元素
                el.focus();
            }
        })

此外除了el函数,还有一个binding的参数,是一个对象,里面包含了很多的元素属性,会用到

例如:我们先给自定义标签加一个唯一标识,如下:

        <p>自定义指令自动获取焦点</p>
        <input type="text" v-focus:param='msg'>

在el的后面添加binding的参数

            inserted(el,binding){//这里的el参数代表指令所挂载的dom元素
                console.log(binding);
                el.focus();
            }

输出内容如下:

 

 

标签:el,Vue,自定义,元素,focus,指令
From: https://www.cnblogs.com/yansunda/p/18368045

相关文章

  • 【vue教程】六. Vue 的状态管理
    目录往期列表本章涵盖知识点回顾Vuex的基本概念什么是Vuex?为什么需要Vuex?Vuex的核心概念stategettersmutationsactionsmodulesVuex的安装和基本使用安装Vuex创建store在Vue应用中使用store在组件中访问和修改状态Vuex的模块化模块化的好处创建模块Vuex的......
  • 图片热区。vue3+ts和vue3+js写法(js没写完数据,功能完善)2
    不知道为啥我上一篇的图片热区被移出首页,其实我主要是是为了自己看,其次才是分享,这段时间我又整理了一下热区,将里面的功能进一步完善了一下;解决一下问题:1.解决拖拽到规定区域外后松开鼠标再次进入后,坐标错误的问题2.新增6个方向的拖拽放大缩小热区区域3.新增放大了图片区域4.......
  • 指令执行过程
    1.指令周期 指令周期:        CPU从主存中每取出并执行一条指令所需的全部时间。        指令周期常常用若干机器周期来表示,机器周期又叫CPU周期。机器周期:        一个机器周期又包含若干时钟周期。时钟周期:               ......
  • 7-自定义泛型
    自定义泛型结构泛型类的定义和实例化泛型------>添加限制/*Demo01就是一个普通的类Demo01<E>就是一个泛型类<>里面就是一个参数类型,但是这个类型是什么呢?这个类型现在是不确定的,相当于一个占位但是现在确定的是这个类型一定是一个引用数据类型*/publicclassDemo01<E......
  • vue3 之 多张图片压缩下载
    一、涉及的插件①JSZip:jszip是一个用于创建、读取和编辑.zip文件的JavaScript库② FileSaver:FileSaver是一个用于在客户端保存文件的JavaScript库。它提供了一种简单的方式来将数据保存为本地文件,通常用于在浏览器中将动态生成的内容(如图像、文档、压缩文件等)保存......
  • 解决Vue3+Ts打包项目时会生成很多的map文件
     正常打包会生成.js和.map文件怎么去解决它呢?正常来说我们会在vite.config.ts配置我们的项目打包方式,如下:(我这里的target:es2022是为了支持模块中顶层await的使用)//Vite配置文件exportdefault{build:{//指定构建输出目录outDir:"dist",//使用"......
  • 【2025毕设热门选题】《基于SpringBoot+Vue的毕业设计管理系统》功能规划和开题报告
    博主介绍:8年资深码农、211小硕,全网10万+粉丝。文科生转码,所以非常懂小白学习历程。java领域优质创作者,擅长小白基础课程教学和项目讲解辅导。专注于Java技术领域和大学生毕业项目实战讲解已经5年,服务10000+小白客户。技术范围:自己手撸SpringBoot、Vue、javaweb网站、小程......
  • gin 自定义validate错误消息
    以json的形式返回error,同时支持自定义错误消息msg。funcGetError(errerror,rinterface{})map[string]interface{}{ errs:=err.(validator.ValidationErrors) s:=reflect.TypeOf(r) for_,fieldError:=rangeerrs{ filed,_:=s.FieldByName(fieldError.Fi......
  • 基于django+vue框架的实时新闻推送平台edpjq【开题报告+程序+论文】计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在信息爆炸的时代,新闻资讯的时效性成为了媒体竞争的关键。随着互联网技术的飞速发展,人们获取新闻的方式已从传统的报纸、电视转向了手机、......
  • 基于django+vue框架的教学资源管理系统【开题报告+程序+论文】计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,教育领域正经历着前所未有的变革。传统的教学模式逐渐向数字化、网络化、智能化方向转型,教学资源管理系统作为教育......