vue单文件自定义指令的封装

vue单文件自定义指令的封装

第一步（封装一个js文件）

// 暴露并配置指令  功能添加背景颜色
export const mycolor = {// 解析结构完成后自动运行钩子函数inserted(el, binging) {  //el表示指令所绑定的元素，可以用来操作DOMel.style.color = binging.value; //binging:一个对象，包含多个属性，特别里面的value,通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binging.value可以获取},
};
// 自动聚焦
export const myfocus = {inserted(el) {el.focus();},
};

第二步（在单文件组件中引入因为封装多个指令，传过来是对象，所以需要解构）

// 引入封装的自定义指令
import { myfocus } from '@/utils/02.封装指令';

第三步注册指令

// 注册指令directives: {myfocus,},

第四步在需要用指令的地方添加指令，用法和正常指令用法一样

 <input type="text" class="taginput"  v-myfocus  />

vue单文件自定义指令的封装相关推荐

手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
【vue】使用自定义指令实现时间戳格式化
时间戳的显示需求在开发中,大多数情况下从服务器请求获取到的都是时间戳. 我们需要将时间戳转换成具体格式化的时间来展示. 在Vue2中可以通过过滤器(filter)来完成: 在Vue3中可以通过计算 ...
Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
VSCode环境下配置ESLint 对Vue单文件的检测
本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持. ESLint 安装 1.在工程根目录下,安装eslint及初始化 $ npm install e ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
php 自定义sql 脚手架,vue路由、自定义指令、脚手架
*Vue vue-router 一.路由一.导航式路由路由路径由标签配置标签内 to属性值规定改标签指向的path路径: 路由对应视图通过加载组件加载到上去首页去新闻配置路由的步骤: ...

vue单文件自定义指令的封装

vue单文件自定义指令的封装相关推荐

最新文章

热门文章