当前位置: 首页 > news >正文

VUE——自定义指令

Vue自定义指令概述

Vue自定义指令可以封装一些 dom 操作,扩展额外功能。它们允许开发者直接对DOM元素进行低层次操作,自定义指令可以响应Vue的响应式系统,从而在数据变化时触发相应的DOM更新。

自定义指令语法

自定义指令的常用钩子函数:

  • inserted 被绑定元素插入父节点时调用的钩子函数
  • update 指令值修改时调用的钩子函数

自定义指令的参数:

  • el  表示被绑定了指令的那个 dom 元素,这个el 参数,是一个原生的 JS 对象,所以 Vue 自定义指令可以用来直接和 DOM 打交道
  • binding  是一个对象,它包含以下属性:name、value、oldValue、expression、arg、modifiers

注意:在使用指令的时候,一定要先注册再使用,否则会报错 使用指令语法: v-指令名。

如:<input type="text" v-focus/>

注册指令时不用v-前缀,但使用时一定要加v-前缀

  • 全局注册
//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签,扩展额外功能el.focus()}
})
  • 局部注册
//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签,扩展额外功能el.focus()}}
}

自定义指令实例

color 指令

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

1.在绑定指令时,可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值,指令值修改会 触发 update 函数

directives: {color: {inserted (el, binding) {el.style.color = binding.value},update (el, binding) {el.style.color = binding.value}}
}

v-loading指令

封装一个 v-loading 指令,实现加载中的效果

1.准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层

2.开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

<template><div class="main"><div class="box"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div> </div>
</template><script>
// 安装axios =>  yarn add axios || npm i axios
import axios from 'axios'// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {data () {return {list: [],isLoading: false,isLoading2: false}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data}, 2000)}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

相关文章:

  • MySQL基础关键_012_事务
  • PH热榜 | 2025-05-08
  • element-ui form 组件源码分享
  • GoogLeNet详解
  • 常用 svg ICON
  • 详细聊聊 Synchronized,以及锁的升级过程
  • Cursor+AI辅助编程-优先完成需求工程结构化拆解
  • 1分区 1-113 多线不起总线启
  • Optimum详解
  • LeetCode 216.组合总和 III:回溯算法实现与剪枝优化
  • 日拱一卒 | RNA-seq数据质控(1)
  • 400种行业劳动合同模板
  • 从零到精通:GoFrame ORM 使用指南 - 特性、实践与经验分享
  • vfrom表单设计器使用事件机制控制字段显示隐藏
  • SpringAI实现AI应用-自定义顾问(Advisor)
  • Kubernetes HPA 深度解析:生产环境自动扩缩容实战指南
  • 计算机网络笔记(十六)——3.3使用广播信道的数据链路层
  • 高效文件夹迁移工具,轻松实现批量文件管理
  • PVP鼠标推荐(deepseek)
  • 谷歌 Gemma 大模型安装步骤
  • 甘肃省建设监理协会 官方网站/免费好用的crm软件
  • 做网站与不做网站的区别/福州seo优化
  • 郑州企业网站制作公司/seo sem是啥
  • 武汉网站建设与服务/品牌推广活动方案
  • 张掖哪家公司做网站/网址生成短链接
  • 宁波高端网站设计价格/3d建模培训学校哪家好