Vue3自定义指令

文章目录

  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式

Vue3自定义指令

1. 自定义全局指令v-focus

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

  • 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  自定义v-focus 在页面加载时，元素获得焦点</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><p>页面加载时，input自动获取焦点</p>
<!--    使用自定义的v-focus聚焦指令--><input v-focus>
</div><script>//    创建HelloVueApp应用const HelloVueApp = Vue.createApp({})// 注册全局指令v-focus 在页面加载时 元素获得焦点HelloVueApp.directive('focus',//     当元素被绑定挂载到DOM中时...{mounted (el) {// 聚焦元素el.focus()}})// mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：页面载入时，input 元素自动获取焦点
    在这里插入图片描述

    在这里插入图片描述

2. 自定义局部指令v-focus

  • 可以使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  自定义局部指令v-focus 使指令只能在这个实例中使用</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><p>页面加载时，input自动获取焦点</p>
<!--    使用自定义的v-focus聚焦指令--><input v-focus>
</div><script>//    定义HelloVueApp应用const HelloVueApp = {data () {return {}},// 注册局部指令v-focus 使指令只能在这个实例中使用directives : {focus : {//     获得焦点mounted(el) {el.focus()}}}}// 创建HelloVueApp应用，使用mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中Vue.createApp(HelloVueApp).mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

3. 指令定义的钩子函数

3.1 概念

指令定义函数提供了几个钩子函数（可选）：

  • created : 在绑定元素的属性或事件监听器被应用之前调用。

  • beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。

  • mounted : 在绑定元素的父组件被挂载后调用。。

  • beforeUpdate: 在更新包含组件的 VNode 之前调用。。

  • updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。

  • beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。

  • unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。

    import { createApp } from 'vue'
const app = createApp({})// 注册
app.directive('my-directive', {// 指令是具有一组生命周期的钩子：// 在绑定元素的 attribute 或事件监听器被应用之前调用created() {},// 在绑定元素的父组件挂载之前调用beforeMount() {},// 绑定元素的父组件被挂载时调用mounted() {},// 在包含组件的 VNode 更新之前调用beforeUpdate() {},// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用updated() {},// 在绑定元素的父组件卸载之前调用beforeUnmount() {},// 卸载绑定元素的父组件时调用unmounted() {}
})// 注册 (功能指令)
app.directive('my-directive', () => {// 这将被作为 `mounted` 和 `updated` 调用
})// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

3.2 钩子函数参数

钩子函数的参数有：

  • el：el 指令绑定到的元素。这可用于直接操作 DOM。

  • binding：binding 是一个对象，包含以下属性：

    • instance：使用指令的组件实例。

    • value：传递给指令的值。例如，在 v-my-directive=“1 + 1” 中，该值为 2。

    • oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。

    • arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 “foo”。

    • modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。

    • dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中：

      app.directive('focus', {mounted(el) {el.focus()}
})

      dir 将会是以下对象：

      {mounted(el) {el.focus()}
}

3.3 vnode & prevNode

  • vnode：作为 el 参数收到的真实 DOM 元素的蓝图。

  • prevNode：上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  vnode：作为 el 参数收到的真实 DOM 元素的蓝图</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用自定义的runoob组件--><div v-runoob="{name: '比亚迪', url: 'https://www.bydglobal.com/cn/index.html'}"></div>
</div><script>//    创建HelloVueApp应用const HelloVueApp = Vue.createApp({})// 指令定义的钩子函数参数： el绑定到的元素，可用于直接操作 DOM// binding 是一个对象，vnode：作为 el 参数收到的真实 DOM 元素的蓝图。HelloVueApp.directive('runoob', (el, binding, vnode)=>{console.log(binding.value.name)console.log(binding.value.url)var s = JSON.stringifyel.innerHTML = s(binding.value)})// mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

3.4 简写

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor = binding.value.color
})

3.5 指令函数接受JavaScript表达式

  • 指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 指令函数可接受所有合法的 JavaScript 表达式 传入了 JavaScript 对象</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用自定义的runoob组件  传入了 JavaScript 对象--><div v-runoob="{color: 'green', text: '比亚迪'}"></div>
</div><script>//    创建HelloVueApp应用const HelloVueApp = Vue.createApp({})// 指令定义的钩子函数参数： el绑定到的元素，可用于直接操作 DOM// binding 是一个对象，vnode：作为 el 参数收到的真实 DOM 元素的蓝图。HelloVueApp.directive('runoob', (el, binding, vnode)=>{// el:绑定到的元素 直接直接操作DOM// binding：接收的对象el.innerHTML = binding.value.textel.style.backgroundColor = binding.value.color})// mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/108472.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

zabbix -- 安装

zabbix -- 安装

Zabbix zabbix除了可以监控linux服务器之外&#xff0c;还可以监控路由器、交换机、容器等&#xff0c;全方位监控 Zabbix对服务器的监控是通过在服务器上部署“间谍”程序zabbix-agent获取数据&#xff0c;但对于路由器、交换机等机器的监控不能进行部署&#xff0c;这个时候…
阅读更多...
Navicat导入Excel数据顺序变了

Navicat导入Excel数据顺序变了

项目场景&#xff1a; Navicat导入Excel数据 问题描述 从Excel表格中导入数据到数据库中。但是&#xff0c;在导入的过程中&#xff0c;我们常会发现数据顺序出现了问题&#xff0c;导致数据错位&#xff0c;给数据的处理带来了极大的麻烦。 原因分析&#xff1a; 这个问题的…
阅读更多...
2023备战秋招Java面试八股文合集

2023备战秋招Java面试八股文合集

Java就业大环境仍然根基稳定&#xff0c;市场上有很多机会&#xff0c;技术好的人前景就好&#xff0c;就看你有多大本事了。小编得到了一份很不错的资源&#xff0c;建议大家可以认真地来看看以下的资料&#xff0c;来提升一下自己的核心竞争力&#xff0c;在面试中轻松应对面…
阅读更多...
Vue3+Element Plus实现el-table跨行显示（非脚手架）

Vue3+Element Plus实现el-table跨行显示（非脚手架）

Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-method"objectSpanMethod"自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试&#xff0c;完整代码如下效果图 app组件内容 <div id"app"><!-- 远程搜索 --><e…
阅读更多...
webpack自定义loader解析指定后缀名文件

webpack自定义loader解析指定后缀名文件

案例&#xff1a; webpack自定义loader解析.chenjiang后缀名的文件 整体目录&#xff1a; chenjiangLoader.js文件代码 // 正则匹配script标签中的内容 const REG /<script>([\s\S]*)<\/script>/;module.exports function (source) {const __source source.…
阅读更多...
运算放大器学习笔记

运算放大器学习笔记

目录 一、基本定理二、基本定义三、负反馈电路四、同向放大电路五、反向放大电路六、差分放大电路 一、基本定理 【电路示意图】 开环放大公式 VOAvo(V-V-) 开环放大倍数&#xff08;增益&#xff09;非常大&#xff0c;105 或 106 输入阻抗超级大&#xff08;可以理解为电…
阅读更多...
进程与线程

进程与线程

一、同步与互斥 【2016统考】进程P1和P2均包含并发执行的线程&#xff0c;部分伪代码描述如下。 下列选项中&#xff0c;需要互斥执行的操作是&#xff08;&#xff09; A、a 1 与 a 2 B、a x 与 b x C、x1 与 x2 D、x 1 与 x 3 解析&#xff1a; …
阅读更多...
华为云征文｜华为云云耀云服务器L实例使用教学

华为云征文｜华为云云耀云服务器L实例使用教学

目录 国内免费云服务器&#xff08;体验&#xff09; 认识国内免费云服务器 如何开通国内免费云服务器 云耀云服务器 HECS HECS适用于哪些场景&#xff1f; 网站搭建 电商建设 开发测试环境 云端学习环境 为什么选择华为云耀云服务器 HECS 国内免费云服务器&#xff…
阅读更多...
选择适合您网站的SSL证书，保障安全与信任

选择适合您网站的SSL证书，保障安全与信任

在如今数字化的时代&#xff0c;拥有一个安全可靠的网站是至关重要的。而SSL证书作为保护网站和用户数据安全的关键工具&#xff0c;选择适合自己网站的SSL证书成为了每个网站管理员必须面对的重要任务。下面将为您分享几个关键因素&#xff0c;帮助您做出明智的选择。 1. 网站…
阅读更多...
将钉钉机器人小程序从一个公司迁移至另一个公司的步骤

将钉钉机器人小程序从一个公司迁移至另一个公司的步骤

引言&#xff1a; 由于我们以前开发的钉钉小程序都在一个公司&#xff0c;想在想应用到另一个公司&#xff0c;这就牵扯出了关于钉钉小程序迁移方面的具体步骤。下面是具体步骤&#xff1a; 1、创建一个钉钉小程序 在这一步你需要有钉钉开放平台的开发者权限&#xff0c;具体…
阅读更多...
到底适不适合报考浙大MPA项目？这个角度评估比较客观

到底适不适合报考浙大MPA项目？这个角度评估比较客观

现今的浙大mpa项目招生可以说是如日中天&#xff0c;2023年1900报考量创造历史最高&#xff0c;也把浙大mpa招生复试自划线顶的老高&#xff0c;200的分数只能碰得到复试资格&#xff0c;距离录取结果还有不少悬念&#xff0c;因此报考浙大mpa项目目前最好的办法是提面冲击A资格…
阅读更多...
华为云云耀云服务器L实例评测｜基于宝塔部署SpringBoot后端+前端工程

华为云云耀云服务器L实例评测｜基于宝塔部署SpringBoot后端+前端工程

目录 前言 一、云耀云服务器L实例购买 1.远程登录并重置密码 2. 第三方登录 二、宝塔Linux面板初始化 1.开放宝塔8888端口 2.初始化宝塔 3.登录宝塔后台 三、宝塔软件安装 1.安装ftp 2.配置JDK 四、Springboot工程部署 1.创建JDK管理 2.上传springboot工程jar包 3.新建Java项目…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023