自定义指令,全局,局部,注册

news2024/12/25 9:00:01

让输入框自动获取焦点(每次刷新自动获取焦点)

<template>
  <div>
    <h3>自定义指令</h3>
    <input ref="inp" type="text">
  </div>
</template>

<script>
export default {
  mounted(){
    this.$refs.inp.focus()

  }

}
</script>

<style>

</style>

1.全局注册指令

在main.js中全局注册指令

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局注册指令
// 第一个参数是指令名,第二个参数是指令的配置项(在配置项里可以写指令相关的钩子,相关的生命周期函数)
Vue.directive('focus', {
  // inserted会在指令所在元素被插入到页面时触发
  inserted(el) {
    // el就是指令所绑定的元素
    el.focus()


  }
})


new Vue({
  render: h => h(App),
}).$mount('#app')
《!--在input标签中写上自定义指令 v-自定义的指令名 -->
<template>
  <div>
    <h3>自定义指令</h3>
    <input v-focus ref="inp" type="text">
  </div>
</template>

<script>
export default {
  // mounted(){
  //   this.$refs.inp.focus()

  // }

}
</script>

<style>

</style>

2.局部注册指令(只在当前组件范围使用)

<template>
  <div>
    <h3>自定义指令</h3>
    <input v-focus ref="inp" type="text">
  </div>
</template>

<script>
export default {
  // mounted(){
  //   this.$refs.inp.focus()

  // }
  directives:{
    // 指令名:指令的配置项
    focus:{
      // 这里同样也有个形参el
      inserted(el){
        el.focus()
      }
    }
  }

}
</script>

<style>

</style>

 封装一个指令v-color

自定义指令 v-color ,然后在h1标签中写入v-color指令,但是如果指令颜色写固定为red的话,每个使用该指令的标签都是同样的颜色。

希望标签是不同颜色,将该自定义指令传入不同的值,在data中定义不同的值。

但是自定义指令中是拿不到传入指令的值的,所以必须通过另一个配置项binding,通过binding.value取得传入的指令的值

<template>
  <div>
    <!--相当于给两个指令传入不同的值 -->
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1>
    
  </div>
</template>

<script>
export default {
  data(){
    return{
      color1:'red',
      color2:'green'

    }
  },
  directives:{
    color:{
      //1.inserted提供的是元素被添加到页面中的逻辑,直接修改数据是无法改变颜色的
      // el形参表示的是传入的dom元素
      inserted(el,binding){
        // console.log(el,binding.value);
        
        // 如何拿到传递的不同的值?在binding配置对象中通过binding.value中拿到所对应的变量值
        // binding.value就是指令的值
        el.style.color = binding.value
      },
      // update(el,binding){
      //   el.style.color = binding.value
      // }
    }
  }

}
</script>

<style>

</style>

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

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

相关文章

【C语言】C语言的变量和声明系统性讲解

声明和定义的概念 在C语言中&#xff0c;**声明&#xff08;Declaration&#xff09;和定义&#xff08;Definition&#xff09;**是两个重要的基础概念&#xff0c;它们都涉及到变量、函数、结构体等的使用&#xff0c;但功能和作用存在明显区别&#xff1a; 声明&#xff1a…

【优选算法篇】:滑动窗口算法--开启高效解题的“窗口”,透过例题看奥秘

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 一.滑动窗口算法二.例题1.长度最小的子数组2.无重复字符的最长字串…

调用大模型api 批量处理图像 保存到excel

最近需要调用大模型&#xff0c;并将结果保存到excel中&#xff0c;效果如下&#xff1a; 代码&#xff1a; import base64 from zhipuai import ZhipuAI import os import pandas as pd from openpyxl import Workbook from openpyxl.drawing.image import Image from io i…

CEEMDAN-CPO-VMD二次分解(CEEMDAN+冠豪猪优化算法CPO优化VMD)

CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09; 目录 CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 首先运用CEEMDAN对数据进行一次分解&#xff…

Bloom 效果

1、Bloom 效果是什么 Bloom效果&#xff08;中文也可以叫做高光溢出效果&#xff09;&#xff0c;是一种使画面中亮度较高的区域产生一种光晕或发光效果的图像处理技术&#xff0c;Bloom效果的主要目的是模拟现实世界中强光源在相机镜头或人眼中造成的散射和反射现象&#xff…

【ArkTS】列表组件的“下拉刷新”和“上拉加载”

系列文章目录 【ArkTS】关于ForEach的第三个参数键值 【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】 【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案” 【ArkTS】 一篇带你掌握“语音转文字技术” --内附详细代码 【ArkTS】技能提高–“用户授权”…

Otter数据同步原理

otter是阿里巴巴的开源的一款数据数据同步工具&#xff0c;它基于对数据库增量日志解析&#xff0c;准实时同步到本机房或者异地机房的mysql/oracle/mq等&#xff0c;是一个分布式数据同步系统。otter第一版本可追溯到04~05年&#xff0c;开发时间从2011年7月份一直持续到现在&…

【已解决】黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题

黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题 在 MvcConfig 文件中添加好RefreshTokenInterceptor拦截器 出现异常情况 按照验证码登录后&#xff0c;进入主页面&#xff0c;再点击“我的”&#xff0c;又跳入登录界面 原因…

AI - RAG中的状态化管理聊天记录

AI - RAG中的状态化管理聊天记录 大家好&#xff0c;今天我们来聊聊LangChain和LLM中一个重要的话题——状态化管理聊天记录。在使用大语言模型(LLM)的时候&#xff0c;聊天记录&#xff08;History&#xff09;和状态&#xff08;State&#xff09;管理是非常关键的。那我们先…

记一次跑前端老项目的问题

记一次跑前端老项目的问题 一、前言二、过程1、下载依赖2、启动项目3、打包 一、前言 在一次跑前端老项目的时候&#xff0c;遇到了一些坑&#xff0c;这里记录一下。 二、过程 1、下载依赖 使用 npm install下载很久&#xff0c;然后给我报了个错 core-js2.6.12: core-js…

使用Goland对6.5840项目进行go build出现异常

使用Goland对6.5840项目进行go build出现异常 Lab地址: https://pdos.csail.mit.edu/6.824/labs/lab-mr.html项目地址: git://g.csail.mit.edu/6.5840-golabs-2024 6.5840运行环境: mac系统 goland git clone git://g.csail.mit.edu/6.5840-golabs-2024 6.5840 cd 6.5840/src…

Thonny IDE + MicroPython + ESP32 + GY-302 测量环境中的光照强度

GY-302是一款基于BH1750FVI光照强度传感器芯片的模块。该模块能够直接测量出环境中的光照强度&#xff0c;并将光照强度转换为数字信号输出。其具体参数如下表所示。 参数名称 参数特性 测量范围 0-65535 LX 测量精度 在环境光下误差小于20%&#xff0c;能够自动忽略50/60…

网站打开速度测试工具:互联网优化的得力助手

在信息飞速流转的互联网时代&#xff0c;网站如同企业与用户对话的窗口&#xff0c;其打开速度直接关乎用户体验&#xff0c;乃至业务的成败。所幸&#xff0c;一系列专业的网站打开速度测试工具应运而生&#xff0c;它们宛如幕后的技术侦探&#xff0c;精准剖析网站性能&#…

2024数字科技生态大会 | 紫光展锐携手中国电信助力数字科技高质量发展

2024年12月3日至5日&#xff0c;中国电信2024数字科技生态大会在广州举行&#xff0c;通过主题峰会、多场分论坛、重要签约及合作发布等环节&#xff0c;与合作伙伴共绘数字科技发展新愿景。紫光展锐作为中国电信的战略合作伙伴受邀参会&#xff0c;全面呈现了技术、产品创新进…

Matlab R2024b 中文版 下载及安装教程

点击下方链接下载安装包 Matlab R2024b 中文版安装包点击下载https://mp.weixin.qq.com/s/Kq2j1dQLdULOVV9vrA6pkA 安装教程 1.通过上方链接下载软件&#xff0c;鼠标右键【MATLAB R2024b(64bit)】压缩包&#xff0c;选择解压到MATLAB R2024b(64bit)。 2.双击进入解压后的文…

输入法:点三下输入一个汉字

作者常用的双拼输入法&#xff0c;需要26键。虽然也有9键的方案&#xff0c;但重码率较高。计算一下&#xff0c;9键点2下&#xff0c;共81种排列组合。而汉字的读音&#xff0c;不计声调&#xff0c;有400多个。相差甚多。 所以&#xff0c;设计了“三拼输入法”&#xff0c;…

Windows设备go环境安装配置

一、下载go安装包 官网链接&#xff1a;All releases - The Go Programming Language (google.cn) 安装过程比较简单&#xff0c;这里不再赘述&#xff0c;可参考这位博主的文章。本文重点在环境配置。golang环境详细安装、配置_golang安装-CSDN博客 二、环境变量配置 1.添…

简易图书管理系统

javawebjspservlet 实体类 package com.ghx.entity;/*** author &#xff1a;guo* date &#xff1a;Created in 2024/12/6 10:13* description&#xff1a;* modified By&#xff1a;* version:*/ public class Book {private int id;private String name;private double pri…

电子信息工程自动化 单片机自动门控制系统设计

摘 要 伴随着社会经济的发展进步、科学技术的发展进步以及人民群众日常生活质量的逐渐提升&#xff0c;自动门开始全面进入人民群众的生活&#xff0c;逐渐发展成为了宾馆、大型超市、政府等当代建筑里必须配备的设备&#xff0c;是建筑自动智能化综合水平的主要标准之一。它具…

深度解析 Ansible:核心组件、配置、Playbook 全流程与 YAML 奥秘(上)

文章目录 一、ansible的主要组成部分二、安装三、相关文件四、ansible配置文件五、ansible 系列 一、ansible的主要组成部分 ansible playbook&#xff1a;任务剧本&#xff08;任务集&#xff09;&#xff0c;编排定义ansible任务集的配置文件&#xff0c;由ansible顺序依次执…