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">
相关推荐
前端伪大叔10 分钟前
freqtrade智能挂单策略,让你的资金利用率提升 50%+
前端·javascript·后端
江城开朗的豌豆11 分钟前
从“any”战士到类型高手:我的TypeScript进阶心得
前端·javascript·前端框架
红尘散仙31 分钟前
TRNovel王者归来:让小说阅读"声"临其境的终端神器
前端·rust·ui kit
知花实央l36 分钟前
【Web应用安全】SQLmap实战DVWA SQL注入(从环境搭建到爆库,完整步骤+命令解读)
前端·经验分享·sql·学习·安全·1024程序员节
烛阴39 分钟前
为你的Lua代码穿上盔甲:精通错误处理的艺术
前端·lua
专注前端30年1 小时前
Vue CLI与Webpack:区别解析与实战使用指南
前端·vue.js·webpack
余道各努力,千里自同风1 小时前
如何使用 Promise.all() 处理异步并发操作?
开发语言·前端·javascript
营赢盈英1 小时前
How to detect if <html> tag has a class in child Angular component
前端·javascript·css·html·angular.js
Achieve - 前端实验室1 小时前
深入浅出 ES Module
前端·javascript
littleplayer1 小时前
Combine 基本使用指南
前端