【VUE】自定义全局指令,局部指令

2023-11-10

全局指令:

vue项目中一般使用utils文件夹来存放全局的函数,指令
首先在src目录下创建utils文件夹
在文件夹内创建directives.js文件
自定义指令“focus”使表单元素获取焦点

export default(Vue) => {
	Vue.directive("focus", {
		inserted: function(el) {
			el.focus();
		}
	})
}

在main.js中声明指令

import directives from '@/utils/directives.js'
Vue.use(directives)

在vue文件中直接使用即可

<input v-focus />

局部指令:

<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【VUE】自定义全局指令,局部指令 的相关文章

  • vue3 vue-router 钩子函数

    全局路由守卫 vue router4 0中将next取消了 可写可不写 return false取消导航 undefined或者是return true验证导航通过 router beforeEach to from gt next是可选参
  • 前端vue项目部署到tomcat,一刷新报错404解决方法

    原文链接 https my oschina net u 1471354 blog 4277008 VUE项目部署到Tomcat之后 刷新页面会出现404 此问题主要是使用了VUE router的History模式 一 解决方案 1 编辑se
  • Vue如何将数据显示在页面中

    如何将data的数据显示在页面中 1 文本插值 div msg div 渲染结果 div hello world div 2 原始HTML插值 v html v text 区别 v text不会对标签进行转义而v html会对标签进行一次转
  • vue+C#后台上传excel处理数据

    比较简洁的excel处理方法 希望对大家有所帮助 1 界面
  • Vue学习(五)登陆页面之重置和发起登陆请求及弹窗提示

    Vue学习 五 登陆页面之重置和发起登陆请求及弹窗提示 表单重置 根据预验证结果决定是否发出登陆请求 编写代码 启动api服务器 弹窗提示 表单重置 直接调用element ui给我们写好的函数就可以了 获取当前表单的实例对象 通过这个实例
  • 包管理工具那么多,怎么选?npm、yarn 和 pnpm 三者比较及使用详解!

    1 简介 在 Vue 项目中 我们需要使用许多第三方依赖库 如 Vue Router Vuex Axios Element UI 等等 这些依赖库通常以 NPM 包的形式提供 而且在使用时需要进行版本管理 因此 我们需要使用一个包管理工具来
  • vue父子组件通信方式哪几种

    第一种 props和 emit parent vue
  • 上拉加载原理

    实现思路 之前写过一篇触底加载 经过一番苦学钻研 优化一下 样式方面 滚动区域是给固定高度 设置 overflow y auto 来实现 接下来看看js方面的实现 其实也很简单 触发的条件是 可视高度 滚动距离 gt 实际高度 例子我会使用
  • mapState的使用(常用)

    mapState作用 可以辅助获取到多个state的值 怎么使用 1 在 vue组件中引入 在js块中引入 import mapState from vuex 2 在 vue组件中computed下定义一个对象 computed mapSt
  • vue-lazyload基础实例(基于vue2.0和vue-router2.0)

    首先引入依赖 import Vue from vue import Router from vue router import VueLazyload from vue lazyload 配置vue lazyload Vue use Vue
  • vue prop属性使用方法小结

    Prop 一 基本用法 Prop的基本用法很简单 作用是在子组件中接收父组件的值 父组件传值
  • H5查看pdf文件(pdfh5)

    我用的是 pdfh5 来查看的H5中的pdf文件 使用 pdfh5 插件来打开 pdf文件 下面是两种使用方法 方法一 二都可以 但是我在使用方法二时有卡顿现象 可能是因为未开启懒加载 方法二中的 on 可以打印出来错误信息 使用方法 1
  • vue——vue-video-player插件实现rtmp直播流

    更新 flash已不可再使用 大家另寻出路吧 安装前首先需要注意几个点 vue video player插件 其实就是 video js 集成到 vue 中 所以千万不要再安装 video js 可能会出错 视频流我这个项目选择rtmp格式
  • vue_table导出excel

    vue直接导出对应table const exportClick gt const wb XLSX utils table to book document querySelector newTables 关联dom节点 get binar
  • vue_域名部署无法访问后端

    前言 目前部署的比较另类 因为服务器为 windows 目前还不是很会 nginx 所以现在就只能在服务器上安装 nodejs 然后直接使用 npm run dev 命令行的方式运行项目 遇到的坑 使用ip访问前端的时候 就可以访问 但是通
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一 实现效果 使用echarts实现省市地图绘制 根据数据在地图显示柱状图 根据数据显示数据 涟漪效果 二 实现方法 1 安装echarts插件 npm install echarts save 2 获取省市json数据 https dat
  • 黑豹程序员-自定义表单实现门户自定制

    功能 用户可以实现欢迎页面自己定制 数据由数据库表进行维护 原理 页面利用div进行布局 拖动div记录其坐标 并写库 页面加载时从数据库表中读取div坐标和数据即可 效果图
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • vue中的防抖和节流

    在Vue中 防抖和节流是两种常用的优化技术 用于限制事件的触发频率 以提高页面性能 防抖 Debounce 是指在事件被触发后 等待一段时间后再执行回调函数 如果在这段等待时间内 事件又被触发 则重新计时 防抖通常用于限制重复触发频率较高的
  • vue的组件

    在Vue中 组件是可复用的代码块 用于构建用户界面 Vue的组件系统允许您将界面拆分为独立的 可重复使用的部件 提供了更好的代码组织和复用性 以下是在Vue中创建组件的基本步骤 创建一个组件实例 可以使用Vue extend 方法创建一个V

随机推荐

  • 19黑马笔记之二叉树的创建

    19黑马笔记之二叉树的创建 1 思想 一个一个节点的创建 先从根节点开始 若输入为 则该节点为空 若不是 则再次调用函数 给该节点创建左右孩子 最后返回该节点 2 实现代码 并不是很常用 了解一下即可 define CRT SECURE N
  • 如何使用streamlit实现端口扫描结果的可视化

    要使用Streamlit实现端口扫描结果的可视化 可以使用Python的第三方库pympler来分析内存使用情况 以下是一个简单的示例代码 from pympler import asizeof import streamlit as st
  • AIGC入门须知

    布道 AI 让更多普通人意识到新时代已经到来 毕竟早人一步就是红利 一 GPT 介绍 一 GPT 概述 GPT 是一种自然语言处理技术的聊天机器人 它能够实现智能对话 回答用户提问 完成任务等功能 具体来说 GPT 能够通过学习语言模式 理
  • 【前端面试题——JS篇】

    目录 1 javascript都有哪些数据类型 如何存储的 2 判断数据类型的方法有哪些 有什么区别 3 说说你对事件循环的理解 4 说说你对BOM的理解 BOM的核心都有哪些 作用是什么 5 Bind call apply有什么区别 如何
  • Python进阶-----面对对象7.0(细谈__new__方法和__init__方法)

    目录 前言 init 方法 new 方法 重点 1 new 方法的调用过程 2 重写 new 方法 3 new 方法不同返回值的情况 3 单例模式 前言 上一期初步介绍了 new 方法 但是实际上这个方法还有非常多的内容值得去讲一讲 学会了
  • Qt编译没使用Q_OBJECT导致编译出错,然后加入后编译仍出错的解决方法。

    这个问题 困扰我一下午 之前没加Q OBJECT导致不能使用信号和槽功能 导致我的程序已知编译出错 后来发现加上后 还是不能编译成功 继续出错 最后在overfolow stack上面找到了答案 原因首先是编译时没加Q OBJECT导致编译
  • Loss和神经网络训练

    出处 http blog csdn net han xiaoyang article details 50521064 声明 版权所有 转载请联系作者并注明出处 1 训练 在前一节当中我们讨论了神经网络静态的部分 包括神经网络结构 神经元类
  • 个人学习网站指南

    个人学习网站指南 一 书籍 二 视频 三 教程 四 实用 五 工具 六 行业 七 百科综合 八 博客论坛 九 官网 十 学习导航 个人平时使用到的一些网站 以免费为主 主要是为了自己以后需要用到能快速导航 持续更新 一 书籍 Free Co
  • [696]我的足迹精华贴@CSDN年度之“战”

    今天是2020年12月24日 距离2021年仅剩7天 临近年末 休几天假 看到CSDN新的征文活动 在犹豫中还是决定写一写年度总结 回顾一下2020 展望一下2021 CSDN血缘 那就先从如何与CSDN有了血缘关系说起吧 先聊聊我参与过的
  • 优秀笔记软件盘点—好看、强大的可视化笔记软件、知识图谱工具

    只推荐优质应用 推荐真正的思维工具 Heptabase 氢图 Walling Reflect InfraNodus TiddlyWiki FlowUs Heptabase 介绍 一款融合白板的可视化卡片笔记 优点 Hepta 提供了多面一体
  • stm32固件库(STM32F10x标准外设库)V3.5简介

    STM32F固件库是根据CMSIS ARM Cortex微控制器软件接口标准 而设计的 CMSIS标准由ARM和芯片生产商共同提出 让不同的芯片公司生产的Cortex M3微控制器能在软件上基本兼容 STM32F10x的固件库是一个完整的软
  • FFmpeg推送的流,播放端播放时花屏问题总结

    1 前言 很多次遇到了这种问题 在这里做一下总结 2 问题总结 第一 是播放端读取缓冲区不够 有时候 高清码流 一帧就好几兆 所以缓冲区要足够长 对于基于FFmpeg的播放器 应该是下面的参数 av dict set this gt opt
  • Lunix下软件安装

    1 Tarball 的产生和使用 1 1 make与configure make是能够对文件进行编译的简化指令 通常软件开发商都会写一支文件名为 configure 或者是 config 的侦测程序来侦测用户的作业环境 侦测完毕后主动的建立
  • Arduino:设置ADC参考电压

    使用LM35模组进行温度传感时 忘记设置参考电压 默认使用当前Arduino工作电压作为参考电压 但是 当用不稳定的外部电源供电时 输出值就不准确了 这时 最好使用内部参考电压 看下面的程序 int LM35 A0 void setup p
  • C++11 谈谈shared_ptr

    C 11 谈谈shared ptr 细节 个人用 十分主观 仅供参考 shared ptr是C 11中加入的一种智能指针 其实并不够智能 其作用就是帮助我们管理在堆中开辟的空间 避免野指针等众多内存管理不当造成的问题 重点 智能指针会自动的
  • CentOS7.4中安装了Mysql5.7之后如何查看默认密码

    之前在虚拟机中安装了CentOS7 4 然后在CentOS7 4中安装了Mysql5 7 安装完成后 Mysql没有生成默认密码 所以可以直接使用命令mysql uroot或mysql登录mysql 今天我在腾讯云服务器 操作系统 Cent
  • RGB屏调试经验分享——颜色不对

    本篇博客分享我之前调试RGB888 LCD屏遇到的两个比较麻烦的问题及解决方法 我这里不说怎么调试屏的周期 时间宽度等调试方法 寄存器怎么填 根据LCD数据手册和主控手册挨个对比设置 花点时间应该很容易设置好 分享的两个问题经验 是LCD可
  • 你是如何自学Python的,全网最全Python攻略,看完这一篇就够了

    新手小白学Python在还没有人带的情况下很容易半途而废 首先给大家总结一下我这两年Python的学习 开发经验遇到一些问题 大家首先得正视这些问题 因为超90 的人在初学Python时都会也遇到 自学网上资料多 但质量参差不齐 资料杂乱又
  • 狂神。SMBMS(超市订单管理系统)

    SMBMS 超市订单管理系统 代码 建议把静态资源和sql拿过来用 其他自己写一遍练手 注意修改相关配置文件 链接 https pan baidu com s 12MmpF9msJVjLT1U77XYfRw 提取码 11fv 数据库 项目如
  • 【VUE】自定义全局指令,局部指令

    全局指令 vue项目中一般使用utils文件夹来存放全局的函数 指令 首先在src目录下创建utils文件夹 在文件夹内创建directives js文件 自定义指令 focus 使表单元素获取焦点 export default Vue g