Vue2基础知识(四) 自定义指令

news2024/12/28 0:56:30

在这里插入图片描述

目录

  • 一 自定义指令
    • 1.1 定义
    • 1.2 自定义局部指令
    • 1.3 全局注册指令
    • 1.4 钩子函数
    • 1.5 动态传参
    • 1.6 使用场景

  • 💌 所属专栏:【Vue2】
  • 😀 作 者:长安不及十里
  • 💻工作:目前从事电力行业开发
  • 🌈目标:全栈开发
  • 🚀 个人简介:一个正在努力学技术的Java工程师,专注基础和实战分享 ,欢迎咨询!
  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘
  • 📌 格言:把戏把戏要过手

  • 📏 官网:https://v2.cn.vuejs.org
  • ⛳ 参考教程:https://www.bilibili.com/video/BV1HV4y1a7n4
  • 🔧 Vue脚手架:https://cli.vuejs.org/zh
  • 🔧 VueRouter:https://router.vuejs.org/zh
  • 🔧 VueX:https://vuex.vuejs.org/zh

一 自定义指令

1.1 定义

image.png

  • vue官方提供很多指令,如:v-model,v-show,v-if,v-if等,他们都以v-开头。当这些指令不能满足我们实际开发需求时,我们还可以自定义指令。
  • 自定义指令主要分为全局自定义指令和局部自定义指令。
  • 结构:
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

1.2 自定义局部指令

<!--
 * @Author: EasonShu
 * @Date: 2023-10-22 09:15:04
 * @LastEditors: Do not edit
 * @LastEditTime: 2023-10-22 19:09:05
 * @FilePath: \vue-demo02\src\components\CustomInstruction.vue
-->
<template>
  <div>
      <!-- <input type="text" v-gfocus> -->
      <input type="text" v-focus>
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
                el.focus()
                // 提示用户输入
                el.placeholder = '请输入内容'
            }
        }
    }
}
</script>

<style>

</style>

image.png
我们可以观察到输入框的变化

1.3 全局注册指令

main.js

// 自动获取焦点
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
     // 提示用户输入
    el.placeholder = '请输入内容'
  }
})

与组件一样,如果在Main.js注册了的话就是全局组件,项目任何地方都可以使用

1.4 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。
directives: {
    focus: {
      // 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      bind(el) {
        console.log(el);
      },
      // 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)
      inserted(el) {
        el.focus();
        // 提示用户输入
        el.placeholder = "请输入内容";
      },
      // 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
      update(el) {
        console.log(el);
      },
      // 指令所在标签, 从网页上移除时触发
      unbind() {
        console.log("指令被移除了");
      },
      // 指令所在标签, 被更新了
      componentUpdated() {
        console.log("指令所在标签, 被更新了");
      },
    },

image.png
指令钩子函数会被传入以下参数:

  • el:指令所绑定的元素,可以用来直接操作 DOM。
  • binding:一个对象,包含以下 property:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
    • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
  • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

1.5 动态传参

指令的参数可以是动态的。例如,在 v-mydirective:[argument]=“value” 中,argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。

 focus: {
      // 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      bind(el, binding, vnode, oldVnode) {
        console.log(el);
        console.log(binding);
        console.log(vnode);
        console.log(oldVnode);
      },
      // 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)
      inserted(el, binding) {
        console.log(binding);
        el.focus();
        // 提示用户输入
        el.placeholder = "请输入内容";
        // 动态指令传参
        el.style.color = binding.value;
      },
      // 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
      update(el) {
        console.log(el);
      },
      // 指令所在标签, 从网页上移除时触发
      unbind() {
        console.log("指令被移除了");
      },
      // 指令所在标签, 被更新了
      componentUpdated() {
        console.log("指令所在标签, 被更新了");
      },
    },

image.png
在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子
注意:这里我们可以简写,我们一般也采用的简写的方式

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

1.6 使用场景

  • 防止重复提交
// 1.设置v-throttle自定义指令
Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 节流时间
    if (!throttleTime) { // 用户若不设置节流时间,则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>
  • 水印
Vue.directive('mark', {
  inserted(el, text) {
        let dom=document.createElement('div');//创建节点
        // 设置css样式
        dom.setAttribute('style','width:100%;transform: rotate(-45deg);top: 50%;position:absolute;opacity:0.1;')
        let time=new Date()
        dom.innerText=text.value||time.toDateString()
        // 如果没有定位则添加定位
        if(getComputedStyle(el,null)["position"]==="static"){
            el.style.position='relative'
        }
        el.appendChild(dom)
    }
})

<div v-mark="11212">
    <!-- <input type="text" v-gfocus> -->
    <input type="text" v-focus />
    <!-- 动态指令传参 -->
    <input type="text" v-focus="colorStr" />
  </div>

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1121597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

全国342个城市往返最短通勤时间(铁路)数据

全国342个城市往返最短通勤时间&#xff08;铁路&#xff09;数据 1、时间&#xff1a;采集时间是2022年 2、来源&#xff1a;12306 3、数据说明&#xff1a;数据采集12306数据&#xff0c;整理全国342个城市往返最短通勤时间&#xff0c;本数据是铁路包含动车、高铁所有路线…

【GESP】2023年06月图形化三级 -- 计算最终值

文章目录 计算最终值【题目描述】【输入描述】【输出描述】【参考答案】其他测试用例 计算最终值 【题目描述】 默认小猫角色&#xff0c;白色背景。存在一种仅支持2种操作和1个变量的编程语言&#xff1a; X 使变量 “X” 的值增加1X-- 使变量 “X” 的值减少 1 最初&#…

基于SAE堆叠自编码器的单维时间序列预测研究(matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

在没有康托尔对角化方法的情况下证明实数的不可数性

乔治康托尔 |图片来源&#xff1a; 维基百科 一、说明 对于那些对数学感兴趣的人来说&#xff0c;无穷大实际上可以有不同的大小&#xff0c;这可能是一个众所周知的事实。事实上&#xff0c;最著名的例子是所有实数的集合比所有自然数的集合“大”。你可能知道&#xff0c;这实…

Docker部署SpringBoot +Vue项目流程详解(含域名 + HTTPS)

文章目录 前言1、选购服务器2、部署 Docker3、前端、后端项目打包4、配置 Dockerfile5、配置 Nginx6、配置 DockerCompose6、启动 DockerCompose 完成部署7、【可选】域名 SSL证书 前言 本次整体部署操作使用阿里云服务器&#xff0c;这里我选择的是香港地区的2核2G ECS&…

打击勒索病毒:防御.kat6.l6st6r勒索病毒的最佳策略

导言&#xff1a; 我们日常生活和工作的方方面面都离不开数字化&#xff0c;但这也意味着面临日益复杂的网络威胁。.kat6.l6st6r勒索病毒就是其中之一&#xff0c;如果你的计算机感染了这种恶意软件&#xff0c;你的数据可能会遭到加密并要求支付赎金才能解锁。在这篇终极指南…

STM32F4_音乐播放器

目录 前言 1. WAV简介 1.1 WAVE文件的内部结构 2. WM8978简介 3. I2S简介 4. 硬件设计 5. 实验程序 5.1 main.c 5.2 I2S.c 5.3 I2S.h 5.4 WM8978.c 5.5 WM8978.h 前言 STM32F4开发板拥有全双工I2S&#xff08;也就是可以同时双向进行传输&#xff0c;A到B传输信息的…

强化学习问题(7)--- Python和Pytorch,Tensorflow的版本对应

1.问题 之前下载的python3.8&#xff0c;在对应Pytorch和Tensorflow时没太在意版本&#xff0c;在运行一些代码时&#xff0c;提示Pytorch和Tensorflow版本过高&#xff0c;直接降下来&#xff0c;有时候又和Python3.8不兼容&#xff0c;所以又在虚拟环境搞一个Pyhon3.7&#x…

Brachistochrone:使用变分法找到最快下降曲线

一、说明 对于任何对数学和科学感兴趣的人&#xff0c;您可能已经知道了急速线&#xff0c;因为它经常在各种流行的教学频道&#xff08;例如 Vsauce 和 3Blue1Brown&#xff09;上谈论。虽然有多种方法可以解决急速线问题&#xff0c;但在这篇文章中&#xff0c;本文将使用变分…

【C++】哈希应用——海量数据面试题

哈希应用——海量数据面试题 一、位图应用1、给定100亿个整数&#xff0c;设计算法找到只出现一次的整数&#xff1f;2、给两个文件&#xff0c;分别有100亿个整数&#xff0c;我们只有1G内存&#xff0c;如何找到两个文件交集&#xff1f;&#xff08;1&#xff09;用一个位图…

Mac安装nginx(Homebrew)

查看需要安装 nginx 的信息 brew info nginxDocroot 默认为 /usr/local/var/www 在 /opt/homebrew/etc/nginx/nginx.conf 配置文件中默认端口被配置为8080&#xff0c;从而使 nginx 运行时不需要加 sudo nginx将在 /opt/homebrew//etc/nginx/servers/ 目录中加载所有文件 …

Springboot+vue的学生考勤管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的学生考勤管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的学生考勤管理系统&#xff0c;采用M&#xff08;model&a…

Gin框架--参数接收函数

1.get 请求 穿参数 #根据返回的bool 判断是否正确传值 _p, err : c.GetQuery("pkg") if !err {p.ReError(c, http.StatusBadRequest, "params pkg empty", "")return} #默认值接收方法_p : c.DefaultQuery("pkg", "hmf") …

【java计算机毕设】高校奖学金管理系统 java springmvc vue mysql 送文档+ppt

目录 1.项目功能截图 2.项目简介 3.源码下载地址 1.项目功能截图 2.项目简介 ssm奖学金系统 医院系统 idea mysql5.7/8 tomcat8 html jdk1.8 奖学金管理系统。基于SpringBootVue框架开发&#xff0c;方便学生直观得查看学校奖学金的评选时间、评选资格和评选内容&#xff0…

C语言学习系列->动态内存管理

文章目录 前言概述&#x1f6a9;malloc and free&#x1f51c;malloc&#x1f51c;free &#x1f6a9;calloc and realloc&#x1f51c;calloc&#x1f51c;realloc 前言 要想学好数据结构&#xff0c;在C语言学习过程中就需要把指针、结构体和动态内存管理学好。在前面的文章&…

2006-2019年全国30省绿色创新效率、绿色投资效率:基于SBM-DEA测算面板数据(数据+Stata代码)

1、来源&#xff1a;各省年鉴、统计局、科技年鉴 2、时间&#xff1a;2006-2019 3、范围&#xff1a;全国 30 个省份 4、指标&#xff1a; 原始数据指标&#xff1a;R&D 全时人员当量 (万人年)、R&D 资本存量 (亿元&#xff1b;利用以 1999 年为初期永续存量法&a…

css之Flex弹性布局(父项常见属性)

文章目录 &#x1f415;前言&#xff1a;&#x1f3e8;定义flex容器 display:flex&#x1f3e8;在flex容器中子组件进行排列&#x1fa82;行排列 flex-direction: row&#x1fa82;将行排列进行翻转排列 flex-direction: row-reverse&#x1f3c5;按列排列 flex-direction: col…

postman自动化运行接口测试用例

做过接口测试的人&#xff0c;应该都知道postman &#xff0c;我们在日常的时候都可以利用postman做接口测试&#xff0c;我们可以把接口的case保存下来在collection里面&#xff0c;那么可能会有这样的需求&#xff0c;我们怎么把collection的用例放到jenkins中定时执行呢&…

C++STL的迭代器(iterator)

一、定义 迭代器是一种检查容器内元素并且遍历容器内元素的数据类型。 【引用自&#xff1a;C迭代器&#xff08;iterator&#xff09;_c iterator_NiUoW的博客-CSDN博客】迭代器是一个变量&#xff0c;相当于容器和操纵容器的算法之间的中介。C更趋向于使用迭代器而不是数组下…

【GESP】2023年06月图形化三级 -- 自幂数判断

文章目录 自幂数判断【题目描述】【输入描述】【输出描述】【参考答案】其他测试用例 自幂数判断 【题目描述】 自幂数是指N位数各位数字N次方之和是本身&#xff0c;如153是3位数&#xff0c;其每位数的3次方之和是153本身&#xff0c;因此153是自幂数&#xff0c;1634是4位数…