vue自定义指令， 获取不到el parentNode

最新推荐文章于 2024-03-31 22:29:50 发布
最新推荐文章于 2024-03-31 22:29:50 发布
阅读量4.4k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijiabinbbg/article/details/96008809
版权

 

 

 https://cn.vuejs.org/v2/guide...、

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

试试把 bind 改为 inserted

 

new-lijiabin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
详解在Vue中通过自定义指令获取dom元素
12-08
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的；  在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive) ；  自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数，并允许我们监听指令绑定的
“Cannot read properties of null(reading ‘parentNode‘)vue3运行报错 引入element-plus库
最新发布
luciyana的博客
03-31 745
（注意，之前新生成vue项目的时候，跟着网上教程选的配置，但是要注意如果用element-ui的话就要使用vue2，vue3配套的是element-plus，所以是重新生成vue3项目再搬运，走了很多弯路，不过新手都正常啦）里面使用到了element-plus库的组件，但是没有加入引用，所以报错。本人刚刚开始接触前端，记录一下遇到的问题，希望可以帮助到你！不过我的表达不太标准，因为非常外行，欢迎大家批评指正啦！然后不要忘记在main.js中加入引用哦。就发现可以啦，耶耶耶！
Vue自定义指令封装节流函数的方法示例
08-27
本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自定义全局指令中的坑——必须将el挂载到新建的Vue实例中
weixin_45887178的博客
11-17 464
在Vue中学习使用自定义指令来在文本框上获得焦点时，发现以下指令无效但是也不报错： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-foc
浅谈vue中的自定义指令
weixin_57446003的博客
12-18 324
vue.js中的自定义指令
vue3 使用teleport报错 找不到‘parentNode‘节点（未解决）
YueMiaoL的博客
06-21 4404
vue3 使用teleport报错 找不到'parentNode'节点（未解决）
Vue自定义指令
me_never的博客
10-03 516
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 如果想注册局部指令，组件中也接受一个 directives 的选项： directives: { focus: { ...
Vue按钮权限
景秋
12-25 2862
最近做项目，客户要求做用户-角色-按钮权限，我是用自定义指令来实现的，代码如下： import Vue from 'vue' /**权限指令**/ Vue.directive('has', { bind: function (el, binding) { debugger if (!Vue.prototype.$_has(binding.value)) { se...
查询父节点parentNode
dianlu5775的博客
07-11 120
示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html> <head> ...
Vue 自定义指令可以实现哪些有用的功能
太空编程
08-10 684
Vue 有一些很实用的指令v-showv-ifv-textv-htmlv-bindv-on可以帮助我们实现很复杂的功能，同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景：控制页面元素显示与隐藏，可用作控制权限功能页面元素点击事件防抖与节流通过自定义指令控制图片懒加载针对页面特定元素添加自定义行为对输入内容进行过...
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue 自定义指令自动获取文本框焦点的方法
10-18
今天小编就为大家分享一篇vue 自定义指令自动获取文本框焦点的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue自定义指令写法与个人理解
10-17
VUE指令是什么,VUE自定义指令又是什么,下面就和大家分享一下个人对它们的理解
Vue 自定义指令实现一键 Copy功能
10-16
指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
vue自定义指令实现仅支持输入数字和浮点型的示例
10-16
今天小编就为大家分享一篇vue自定义指令实现仅支持输入数字和浮点型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 3.0 自定义指令 【Vue3 从零开始】
2201_75866484的博客
03-03 383
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。点击此处实现autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。此外，你可以单击Rerun按钮，输入将被聚焦。
Vue 3自定义指令开发
葡萄城技术团队博客
01-28 631
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 什么是指令（directive） 在Angular和Vue中都有Directive的概念，我们通常讲Directive 翻译为“指令”。 在计算机技术中，指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上，“指令”可以是任何可执行程序的元素的表述，例如字节码。 那么在前端框架Vue中“指令”到底是什么，他有什么作用呢？ 在Vue开发中我们在模板中经...
vue 自定义指令 获取焦点
08-19
要在Vue中创建一个自定义指令，让输入框获取焦点，你需要在Vue实例的directives属性中定义一个名为"focus"的指令，并在inserted方法中使用原生的focus()方法将焦点设置为当前元素。具体代码如下: ``` export default { directives: { focus: { inserted(el) { el.focus(); } } } } ``` 然后，在需要获取焦点的输入框上使用v-focus指令即可。在App.vue的模板中，你可以将v-focus指令添加到<input type="text">元素上，如下所示: ``` <template> <div> <input type="text" v-focus> </div> </template> ``` 这样，当组件渲染完成后，该输入框会自动获取焦点。请注意，这个自定义指令只在当前组件的作用域内有效。如果你希望在全局范围内使用这个指令，你需要在全局注册它。可以使用Vue.directive方法实现全局注册，如下所示: ``` Vue.directive("focus", { inserted(el) { el.focus(); } }); ``` 这样，无论在哪个组件中，你都可以在输入框上使用v-focus指令，以获取焦点。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue 自定义指令 自动获取焦点](https://blog.csdn.net/laoli360/article/details/120555899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值