vue/自定义指令

需求: 页面有个input元素,现在要鼠标光标聚焦在上面,让每个页面上的标签都可以聚焦光标,比如,从A页面跳转到B页面的时候,我们依然要聚焦。如果要一遍遍地操作dom就会很麻烦。

这个时候,为了方便开发,我们可以使用vue提供的自定义指令。

自定义指令有两种,分为全局注册和局部注册。

1、全局注册

1.1 在main.js 中 注册

javascript 复制代码
// 1、注册指令
// 1.1 全局注册
Vue.directive('focussss',{
  inserted(el){
    el.focus()
  }
})

1.2 使用

html 复制代码
   <input v-focussss type="text" ref="inp">

2、局部注册

2.1 在当前要使用指令的主键内,注册

javascript 复制代码
  export default {
    components: {},
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {},
    directives:{
        focusdsg:{
          inserted(el) {
            el.focus()
          }
        }
    }
  }

2.2 使用

html 复制代码
 <input v-focusdsg type="text" ref="inp">
相关推荐
计算机魔术师15 分钟前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师30 分钟前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯39 分钟前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒1 小时前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端
tingke1 小时前
别再堆 AGENTS.md 了:前端团队的 Agent 上下文分层落地指南
前端
李明卫杭州2 小时前
React 复合事件系统对比解析
前端·javascript·react.js
葡萄城技术团队2 小时前
SpreadJS V19.2 新特性揭秘:FILTERXML 函数
前端
袋鼠云数栈UED团队3 小时前
AI Coding 方法论分析:同一个需求 SpecKit 、 Superpowers、 MattpocockSkills 不同设计
前端·aigc·ai编程
掰头战士3 小时前
Prompt Cache,如果agent全靠LLM方做隐式缓存实在不够用。
前端·llm·agent
LEE3 小时前
前端转型全栈 01:数据建模,前端最大的盲区
前端·javascript·后端