vue3自定义指令看完这篇就入门了

目录
  • 前言
  • 1. 什么是自定义指令
  • 2. 声明私有自定义指令的语法
  • 3. 使用自定义指令
  • 4. 声明全局自定义指令的语法
  • 5. updated 函数
  • 6. 函数简写
  • 7. 指令的参数值
  • 附:下面根据自定义指令知识点衍生的一个小例子
  • 总结

前言

这篇文章介绍vue组件中的自定义指令!看完不会你打我。哈哈哈,开玩笑的!!

1. 什么是自定义指令

vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。

vue 中的自定义指令分为两类,分别是:

  • 私有自定义指令
  • 全局自定义指令

2. 声明私有自定义指令的语法

在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:

<script>
export default {
  directives: {
      // 自定义私有指令focus,在使用的时候要用 v-focus 。
    focus: {
      mounted(el) {
        el.focus()
      },
    },
  },
}
</script>

3. 使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->
<input v-focus/>

4. 声明全局自定义指令的语法

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:

import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// 注册(对象形式的指令)
app.directive('my-directive', {
  /* 自定义指令钩子 */
})

// 注册(函数形式的指令)
app.directive('my-directive', () => {
  /* ... */
})

// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

5. updated 函数

mounted 函数只在元素第一次插入 DOM 时被调用,当 DOM 更新时 mounted 函数不会被触发。 updated 函数会在每次 DOM 更新完成后被调用。示例代码如下:

// 声明全局自定义指令
app.directive('focus', {
  mounted(el) {
    console.log('mounted')
    el.focus()
  },
  updated(el) {
    console.log('updated')
    el.focus()
  },
})

注意:在 vue2 的项目中使用自定义指令时,【 mounted 要换成 bind 】【 updated 要换成 update 】

6. 函数简写

如果 mounted 和updated 函数中的逻辑完全相同,则可以简写成如下格式:

app.directive('focus', (el) => {
    // 在 mounted 和 updated 都会触发这个函数方法
  el.focus()
})

7. 指令的参数值

在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值,示例代码如下:

// 自定义 v-color 指令
app.directive('color', (el, binding) => {
    // binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value
  el.style.color = binding.value
})

附:下面根据自定义指令知识点衍生的一个小例子

该例子没有特别的技术难点。只是为了验证一下这两天学习的vue3部分知识点,存粹是一个练手记录~~~

//示例

<template>
    <p>
        改变方向:<input type="text" v-model="direction" />
    </p>
    <p>
        改变数值:<input type="range" min="0" :max="maxNum" v-model="pinPadding" />
    </p>
    <p>
        <button @click="reset">重置</button>
    </p>
    <div style="position: relative;border: 1px solid red;width: 800px;height: 400px;margin: 0 auto;">
        <p v-pin:[direction]="pinPadding">数据:{{pinPadding}},方向:{{direction}}</p>
    </div>
</template>
<script>
    import two from './components/two.vue'
    import {
        ref,
        reactive,
        defineComponent,
        computed
    } from 'vue'
    export default ({
        name: 'lycApp',
        components: {
            two
        },
        setup(prop, context) {
            const direction = ref('left')
            const pinPadding = ref(0)
            const reset = () => {
                direction.value = 'left'
                pinPadding.value = 0
            }
            const maxNum = computed(()=>{
                if(direction.value == 'right' || direction.value == 'left'){
                    return 650
                }else{
                    return 360
                }
            })
            return {
                direction,
                pinPadding,
                reset,
                maxNum
            }
        },
        directives: {
            pin: {
                mounted(el, binding) {
                    el.style.position = 'absolute'
                    const s = binding.arg
                    el.style[s] = binding.value + 'px'
                },
                updated(el, binding) {
                    el.removeAttribute('style')
                    el.style.position = 'absolute'
                    const s = binding.arg
                    el.style[s] = binding.value + 'px'
                }
            }
        }
    })
</script>

//效果图

可以在红色线框内随便改变方向跟距离。

总结

到此这篇关于vue3自定义指令的文章就介绍到这了,更多相关vue3自定义指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3.0自定义指令(drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • 如何写一个 Vue3 的自定义指令

    目录 背景 插件 指令的实现 前端巅峰 以下文章来源于微信公众号前端巅峰 背景 众所周知,Vue.js 的核心思想是数据驱动 + 组件化,通常我们开发页面的过程就是在编写一些组件,并且通过修改数据的方式来驱动组件的重新渲染.在这个过程中,我们不需要去手动操作 DOM. 然而在有些场景下,我们还是避免不了要操作 DOM.由于 Vue.js 框架接管了 DOM 元素的创建和更新的过程,因此它可以在 DOM 元素的生命周期内注入用户的代码,于是 Vue.js 设计并提供了自定义指令,允许用户进行一些底

  • vue3的自定义指令directives实现

    目录 一.什么是自定义指令 二.指令的分类 三.指令的作用 四.指令的钩子 五.钩子参数 六.指令的使用 指令的参数和修饰符 一.什么是自定义指令 我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要的指令,使用必须以v-为前缀 二.指令的分类 局部指令:组件中通过directives选项实现,只能在当前组件中使用 全局指令:应用实例的directive方法,可以在任意组

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • Vue3.0写自定义指令的简单步骤记录

    前言 vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令 在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的, 通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解 第一步 在main.js 在src下简历对应的文件夹 import Direc

  • vue3 自定义指令详情

    目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

  • vue3 自定义指令控制按钮权限的操作代码

    经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能.为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒.以下是个人的做法,是否有弊端和不足,或者各位高手有更优的方案,欢迎指导和赐教! 1.总体效果如下: 2.permissionlist组件中的按钮设置为:增加.修改和删除

  • 你了解C#的协变和逆变吗,看完这篇就懂了

    从C# 4.0开始,泛型接口和泛型委托都支持协变和逆变,由于历史原因,数组也支持协变. 里氏替换原则:任何基类可以出现的地方,子类一定可以出现. 协变(out) 协变:即自然的变化,遵循里氏替换原则,表现在代码上则是任何基类都可以被其子类赋值,如Animal = Dog.Animal = Cat 使用out关键字声明(注意和方法中修饰参数的out含义不同) 被标记的参数类型只能作为方法的返回值(包括只读属性) 在没有协变时: abstract class Animal {} class Dog

  • 分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了

    在分布式的应用中,为了防止单点故障,保障高可用,通常会采用主从结构,当主节点挂掉后,从节点可以代替主节点提供服务. Redis通过复制 + sentinel哨兵来实现主从模式. Zookeeper通过replicated mode复制模式来实现主从模式. 单从结构上看,Redis和Zookeeper都是主从架构,那Zookeeper的优势是什么?为什么要选择Zookeeper?难道只是因为Zookeeper是目录结构,Redis是K-V结构吗? 同步机制的不同 Redis Redis在给从节点同

  • 程序员最实用的 SQL 语句收藏,看完这篇就够了

    前言 文章沿着设计一个假想的应用 awesome_app 为主线,从零创建修改数据库,表格,字段属性,索引,字符集,默认值,自增,增删改查,多表查询,内置函数等实用 SQL 语句.收藏此文,告别零散又低效地搜索经常使用的 SQL 语句.所有 SQL 都在 MySQL 下通过验证,可留着日后回顾参考,也可跟着动手一起做,如果未安装 MySQL 可参考 <macOS 安装 mysql> (windows 安装大同小异). 1. 创建 1.1 创建数据库 语法:create database db_

  • Java中你真的会用Constructor构造器吗之看完本篇你就真的会了

    引言 相信大家对于java里的构造器应该都是有了解的,这次我们来了解一些构造器的不同使用方式,了解构造器的调用顺序,最后可以灵活的在各种情况下定义使用构造器,进一步优化我们的代码: 构造器简介 还是简单介绍一下构造器到底是什么吧, 构造器是类中一种特殊的方法,通过调用构造器来完成对象的创建,以及对象属性的初始化操作. 构造器定义方式: [修饰符列表] 构造器名(形式参数列表){ 构造方法体; } 构造器有以下几个特点: 构造器名和类名一致: 构造器用来创建对象,以及完成属性初始化操作: 构造器返

  • 看完这篇文章获得一些java if优化技巧

    目录 1.if 合并 2.将正常的流程放在函数的主干执行 3.减少if 1. 使用三元运算符表达式 2.使用java8 中流过滤filter ,不使用if 3.使用枚举 4.使用manager 5.使用Consumer 总结: 1.if 合并 使用逻辑运算符进行合并if.简单的if 嵌套可以使用&& 进行合并.简单的if else 并且操作相同可以使用 || 进行合并,优化代码逻辑,增加可读性. 注意:逻辑运算符的截断性,if(a >= 10 || b >= 20) 当a>

  • Vue3 编写自定义指令插件的示例代码

    编写自定义插件 // src/plugins/directive.ts import type { App } from 'vue' // 插件选项的类型 interface Options { // 文本高亮选项 highlight?: { // 默认背景色 backgroundColor: string } } /** * 自定义指令 * @description 保证插件单一职责,当前插件只用于添加自定义指令 */ export default { install: (app: App,

随机推荐

其他