加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue.js内部自定义指令与全局自定义指令的实现详解(利用directiv

发布时间:2020-12-17 02:53:20 所属栏目:百科 来源:网络整理
导读:前言 大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive。下面话不多说了,来一起看看详细的介绍: directive 这个单词是我们写自定义指令的关键字

前言

大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive。下面话不多说了,来一起看看详细的介绍:

directive

这个单词是我们写自定义指令的关键字哦

自定义指令为我们提供了几个钩子函数,这时候你一定好奇什么是钩子函数,说简单点,就是集中表现状态

  • bind

    : 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted

    : 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  • update

    : 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  • componentUpdated

    : 被绑定元素所在模板完成一次更新周期时调用。
  • unbind

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

下面我们开始上代码,让我们更好的理解自定义指令怎么做

Document