vue3 自定义指令 directive
目的:在vue项目中编写一些符合自己业务的指令
分类:
全局指令,全部组件都能使用
在main.js中挂载到app上
app.directive(‘focus’, {
mounted(el) {el.focus()}
})
局部指令
在组件内部使用
directives:{
}
指令的生命周期
created
在绑定元素的父组件挂载之前
beforeMounted
在绑定元素的父组件挂载之后
mounted
在绑定元素的父组件vnode更新之前
beforeUpdate
在包含组件的 VNode 及其子组件的 VNode 更新之后调用
update
在绑定元素的父组件卸载之前调用
beforUnmounted
在绑定元素的父组件卸载之后调用
unmounted
指令与元素解除绑定,切父组件已经卸载,只调用一次
实例代码:
指令JS文件
const demo={created:(el,binding)=>{console.log('created')console.log(el)console.log(binding)},beforeMount:(el,binding)=>{console.log('beforeMount')console.log(el)console.log(binding)},mounted:(el,binding)=>{console.log(el)console.log(binding)console.log('111111')},updated:()=>{console.log('updated')},beforeUnmount:()=>{console.log('beforeUnmount')}, unmounted:()=>{console.log('unmounted')}
}export {demo
}
父组件中注册自定义指令
directives: {demo: demo,},
父组件使用自定义指令
<div v-demo v-if="isShow">{{ name11 }}</div>
总结:
- 自定义指令就是自己写一个对象函数,并且能接受绑定元素的一些属性
- 自定义指令也有自己的生命周期函数
- 当指令需要生命周期函数的时候,属性值是个对象,对象里面包括 生命周期 函数
- 如果只需要mounted函数,可以简写为一个函数,不再需要对象函数
- 每个生命周期函数接受的参数为 el binding vnode prevnode
仅记录平常学习
vue3 自定义指令 directive相关推荐
- Vue3:自定义指令directive
一.vue2自定义指令生命周期 bind: function () {}, inserted: function () {}, update: function () {}, componentUpd ...
- Vue3 自定义指令:ClickOutside(点击当前区域之外的位置)
哈喽,大家好,我是 SuperYing.今天我们聊一个 Vue3 自定义指令 - ClickOutside,顾名思义,就是处理点击当前区域之外的位置的场景. Vue 指令 首先,我们先来回顾一下 Vu ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 第三十九篇 自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
- 29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
- Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
- html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
- vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令 需求 效果 全局 - 自定义指令 代码 局部 - 自定义指令 代码 自定义命令传值 效果 代码 问点 需求 获取标签,扩展额外的功能 效果 全局 - 自定义指令 代码 // mai ...
- Vue 自定义指令(directive)
气温骤降,南京又开始了降温 速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
- JFinal自定义指令Directive
Enjoy Template Engine一如既往地坚持极简设计,核心只有 #if.#for.#switch.#set.#include.#define.#(-) 这七个指令,便实现了传统模板引擎几乎 ...
最新文章
- 适用于OpenGL离屏渲染上下文的初始化代码
- 神策分析 1.16 版本上线场景库,实操方法论融入产品,全方位赋能多角色应用...
- Android与服务进程内通信
- python——学习笔记1
- LeetCode 1640. 能否连接形成数组(哈希)
- python批量音频转格式_python将mp3格式批量转化为wav格式
- 为什么需要云压力性能测试?
- leetcode —— 16. 最接近的三数之和
- win8系统电脑中病毒了怎么办,如何解决win8电脑中毒
- mysql 5.6 修改默认字符集_mysql5.6修改默认字符集
- 【每日算法Day 78】面试经典题:能说出全部四种方法,不录用你都不可能!
- 工业互联网发展驶入快车道
- 阿里云解决方案架构师徐翔:云上安全建设实战
- 兼容FireFox和IE8的设为首页和添加收藏
- Postman写接口文档
- link标签的real属性理解
- Flowable流程设计器的使用
- 【个人项目】项目记录:github链接、设计实现、单元测试、性能分析与改进、PSP完成表格、总结反思
- Python pip 安装与使用
- 全新小龟双端影视1.6壳+反编译视频教程