精华内容
下载资源
问答
  • vue3自定义指令
    2022-08-01 16:47:19
    <script setup>
    	//全局自定义指令一样用,本地指令可以直接在模板上使用,但是必须以 vNameOfDirective 的形式来命名本地自定义指令
    	const vMyDirective = {
    		beforeMount: (el) => {
    			console.log(el)
    		}
    	}
    </script>
    <template>
    	<div v-my-directive></div>
    </template>
    
    
    更多相关内容
  • vue3自定义指令

    2022-03-06 16:36:32
    Vue自定义指令分为两种: 自定义局部指令 自定义全局指令 通过自定义指令 v-focus 来举例 Vue3中某个元素挂载完成后获取输入框焦点: 1. 局部指令的实现方式 <script setup> // 自定义指令名称.

    Vue 除了核心功能默认内置的指令 (例如 v-modelv-show),Vue 也允许注册自定义指令

    •  注意,在 Vue 中,代码复用和抽象的主要形式是组件。
    • 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

    Vue自定义指令分为两种:

    1. 自定义局部指令
    2. 自定义全局指令

    通过自定义指令 v-focus 来举例 Vue3中某个元素挂载完成后获取输入框焦点:

    1. 局部指令的实现方式

    <script setup>
      // 自定义指令名称的方式: vNameOfDirective
      const vFocus = {
        mounted: (el) => {
          console.log("v-focus mounted");
          el.focus()
        }
      }
    </script>
    
    <template>
      <div>
        <input type="text" v-focus>
      </div>
    </template>
    
    <style scoped>
    
    </style>

    2.全局指令的实现方式

    // mian.js
    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).directive("focus", {
      mounted: (el) => {
        console.log("v-focus mounted");
        el.focus()
      }
    }).mount('#app')
    

    贴上自定义指令的生命周期

    // 注册
    app.directive('my-directive', {
      // 指令具有一组生命周期钩子:
      // 在绑定元素的 attribute 或事件监听器被应用之前调用
      created() {},
      // 在绑定元素的父组件挂载之前调用
      beforeMount() {},
      // 在绑定元素的父组件挂载之后调用
      mounted() {},
      // 在包含组件的 VNode 更新之前调用
      beforeUpdate() {},
      // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
      updated() {},
      // 在绑定元素的父组件卸载之前调用
      beforeUnmount() {},
      // 在绑定元素的父组件卸载之后调用
      unmounted() {}
    })

    展开全文
  • vue2和vue3自定义指令区别

    首先vue3自定义指令钩子函数发生变化,vue2的写法在vue3中不支持。

    vue2中钩子函数:

    • bind: 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted: 被绑定元素插入父节点时调用

    • update:所用组件的VNode更新时调用,但是可能发生在其子 VNode 更新之前。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。

    vue3中的钩子函数 :

            vue3中自定义指令钩子函数和vue2中的组件生命周期相似,区别在于钩子函数携带参数。

    函数及参数如下代码:

    const myDirective = {
      // 在绑定元素的 attribute 前
      // 或事件监听器应用前调用
      created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节
      },
      // 在元素被插入到 DOM 前调用
      beforeMount(el, binding, vnode, prevVnode) {},
      // 在绑定元素的父组件
      // 及他自己的所有子节点都挂载完成后调用
      mounted(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件更新前调用
      beforeUpdate(el, binding, vnode, prevVnode) {},
      // 在绑定元素的父组件
      // 及他自己的所有子节点都更新后调用
      updated(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件卸载前调用
      beforeUnmount(el, binding, vnode, prevVnode) {},
      // 绑定元素的父组件卸载后调用
      unmounted(el, binding, vnode, prevVnode) {}
    }
    

    vue2和vue3的参数是一样的,包括(el,binding,vnode,preVNode(oldVNode)。具体用法可以查看官网。

    vue2地址:https://cn.vuejs.org/v2/guide/custom-directive.html

    vue3地址:https://staging-cn.vuejs.org/guide/reusability/custom-directives.html

    示例

    官网上的例子如下:

    vue2写法如下:
    
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: (el)=> {
        // 聚焦元素
        el.focus()
      }
    })
    
    
    
    vue3写法:
    
    // 注册一个全局自定义指令 `v-focus`
    app.directive('focus', {
      mounted: (el)=> {
        el.focus()
      }
    })

    实现一个防抖指令。首先实现防抖函数如下:

    //利用闭包变量长期存储的特性,存储变量timer
    
    function debounce(fn,delay){
        let timer;
        return function (...args){
            // 有定时器则清除定时器
            if(timer) clearTimeout(timer)
            timer = setTimeout(()=>{
                fn.apply(this,args)
            },delay)
        }
    }

    然后实现自定义防抖指令:

    全局批量注册自定义指令,可以这样写。
    
    
    import 。。。
    
    const directives={
        focus,
        copy,
        debounce
        ...
    }
    
    export default{
        // vue官网有说,想使用Vue.use或者app.user(plugin),如果插件是一个对象,必须提供 install             方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传    入。
        install(Vue,options){
            Object.keys(directives).forEach(item=>{
                Vue.directive(item,directives[item])
            })
        }
    }
    
    vue2写法:
      const debounce = {
      inserted: function (el, binding) {
        // el 就是dom节点
        let timer
        el.addEventListener('click', () => {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            binding.value()
          }, 1000)
        })
      },
    }
    
    export default debounce
    
    vue3的写法
    
     const debounce = {
      mounted: (el, binding) => {
        let timer
        el.addEventListener('click', () => {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            binding.value()
          }, 1000)
        })
      },
    }
    
    export default debounce
    
        
        

    展开全文
  • vue2 vs vue3自定义指令

    2022-06-20 14:28:19
    vue2 vs vue3自定义指令

    什么是指令?

    在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
    类似于html页面中的属性 <div v-xxx ></div>

    指令的作用是什么呢?

    指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

    vue中常用的v-指令有那些呢?

    1. v-text 元素的InnerText属性,必须是双标签
    2. v-html 元素的innerHTML
    3. v-if 判断是否插入这个元素
    4. v-else-if
    5. v-else
    6. v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none
    7. v-model 对于输入框实现数据的双向绑定

    自定义指令中传递的三个参数

    • el: 指令所绑定的元素,可以用来直接操作DOM。
    • binding: 一个对象,包含指令的很多信息。
    • vnode: Vue编译生成的虚拟节点。

    自定义指令的生命周期

    自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind

    1. bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
    2. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
    3. update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
    4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
    5. unbind:只调用一次,指令与元素解绑时调用。
    bind:()=>{//被绑定
        console.log('1 - bind');
    },
    
    inserted:()=>{//绑定到节点
        console.log('2 - inserted');
    },
    
    update:()=>{//组件更新
        console.log('3 - update');
    },
    
    componentUpdated:()=>{//组件更新完成
        console.log('4 - componentUpdated');
    },
    
    unbind:()=>{//解绑
        console.log('5 - bind');
    }

    总结:

    • 自定义指令的命名规则是什么?
    • 自定义指令的生命周期(钩子函数)有那些?什么时候会被调用?
    • 钩子函数的参数有那些?

    vue3 自定义指令的变化

    每一个钩子函数中,参数的变化:

    • el: 指令绑定的元素,可以用来直接操作DOM
    • binding: 数据对象,包含以下属性

    1.instance: 当前组件的实例,一般推荐指令和组件无关,如果有需要使用组件上下文ViewModel,可以从这里获取

    2.value: 指令的值。

    3.oldValue: 指令的前一个值,在beforeUpdate和Updated 中,可以和value是相同的内容。

    4.arg: 传给指令的参数,例如v-on:click中的click。

    5.modifiers: 包含修饰符的对象。例如v-on.stop:click 可以获取到一个{stop:true}的对象

    • vnode: Vue 编译生成的虚拟节点
    • prevVNode: Update时的上一个虚拟节点

    在Vue 3中钩子函数的生命周期和组件的生命周期类似:

    created - 元素创建后,但是属性和事件还没有生效时调用。

    beforeMount- 仅调用一次,当指令第一次绑定元素的时候。

    mounted- 元素被插入父元素时调用.

    beforeUpdate: 在元素自己更新之前调用

    updated - 元素或者子元素更新之后调用.

    beforeUnmount: 元素卸载前调用.

    unmounted -当指令卸载后调用,仅调用一次

    全局自定义指令的写法:

    let app = createApp(App)
    app.directive('highlight', {
      beforeMount(el, binding, vnode) {
        el.style.background = binding.value
       }
    })
    
    // 改变背景色

    局部自定义指令的写法:

    directives: {
    highlight: {
      beforeMount(el, binding, vnode) {
         el.style.background = binding.value;
      },
    },

    展开全文
  • Vue3 自定义指令

    2022-03-24 15:03:06
    export default (Vue) => { Vue.directive('auth', { mounted(el, binding) { let vm = binding.instance; let userAuthList = vm.$store.getters.authList; if (!Vue.config.globalProperties.$_has...
  • 今天我们就讲讲在 vue3 中,自定义指令定义、使用以及钩子函数都有哪些变化?
  • vue2 、vue3 自定义指令

    2022-01-07 11:25:12
    除了内置的指令 v-model 、v-if等,Vue也允许注册自定义指令vue2.0中,代码复用的主要形式是组件,然而有的情况下,仍然需要对普通的元素进行底层操作。 注册自定义指令 v-focus 全局注册 Vue.directive('...
  • vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示 类似于html页面中的属性 <div v-xxx ></div> 指令的作用是什么呢? 指令中封装了一些DOM行为, 结合属性作为一个...
  • Vue3 自定义指令详解

    2022-04-14 11:14:41
    vue开发中经常会用到v-for、v-model等vue给我们定义好的指令,其实vue也给我们提供了可以自定义自己的指令的方法。 基本使用方式 主要是利用 directive 这个api来实现的,先看下它的用法,在全局中我们可以这么用 第...
  • 相同 : 指令的原理和功能一样 不同 : 一、vue2 : 语法: Vue.directive( ‘自定义指令名字’ , { 配置项 } ) // 注册一个全局的指令 Vue.directive('focus', { // 这里取得focus 是自定义名字 inserted: function...
  • vue3自定义指令(局部 / 全局)

    千次阅读 2021-12-01 22:37:00
    vue3自定义指令
  • Vue3 全局引入的方式 //在src 目录下util新建 directive.js 文件 用于输出指令 export const directive=(app)=>{ app.directive('mydsa', (el) => { // 这将被作为 `mounted` 和 `updated` 调用 ...
  • 1.界面 2.局部自定义指令和setup是平级的 自定义全局自定义指令
  • Vue3自定义指令v-copy实现复制文字

    千次阅读 2021-12-17 13:51:49
    分享8个非常实用的Vue自定义指令 Vue3 自定义指令 官方文档 二、问题描述 工作中有时候会遇到需要实现点击复制的功能,但是不了解实现的原理,只是在网上查找到相关代码,然后copy 了事,无意间发现了有人将复制...
  • 这篇文章介绍vue组件中的自定义指令!看完不会你打我。哈哈哈,开玩笑的,不多说,上刺刀!!
  • Vue3 自定义指令实现按钮权限控制

    千次阅读 2020-11-27 15:20:29
    业务需求除了路由需要控制外点击按钮也需要做到控制,百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏,刚好手头上做了个demo 写个文档记录下; vue2和vue3directive的函数也不一样 bind → ...
  • Vue2.0自定义指令的钩子函数 bind: function(el: any, binding: any): void { console.log("bind"); //指令第一次绑定到元素时调用,只执行一次。在这里可以进行一次性的初始化设置。 }, inserted: function(el...
  • 主要介绍了vue自定义指令改变data中的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 直接上代码(局部使用) <template> <div v-move class="box" style="text-align: right;"> {{ positionX }} {{ positionY }} ...import { Directive, ref } from "vue"; let positionX = ref<
  • 本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考,具体如下: vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢? 自己定义的指令就是自定义指令。 语法: Vue.directive(id, definition...
  • 指令包含复制、指定显示行数、外部点击、防抖节流、element dialog改变大小,拖拽、只可以输入数字、长点击、权限、水印等
  • vue3.0自定义指令

    2022-05-13 03:29:25
    但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做。 const app = vue.createApp({ ...
  • ClickOutside 为自定义指令 const isServer= typeof window === 'undefined' const nodeList = new Map(); let startClick = null; if(!isServer) { document.addEventListener('mousedown', e => { ...
  • Vue3自定义指令用法

    2022-06-30 12:38:31
    vue3自定义指令用法
  • 主要为大家详细介绍了vue使用自定义指令实现拖拽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 在除了提供默认的十几个内置的指令外,还允许开发人员根据实际情况自定义指令,那我们在何时使用它呢?
  • vue2: src/directives/index.ts import Vue from 'vue'; import store from '@/store'; export default function directive() { Vue.directive('auth', { inserted: (el, binding) => { if (!store.state....
  • tsx vue3 自定义指令

    2022-06-01 16:52:30
    vue tsx 自定义指令

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,985
精华内容 16,794
关键字:

vue3自定义指令