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

大佬教程收集整理的这篇文章主要介绍了vue.js内部自定义指令与全局自定义指令的实现详解（利用directive），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

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

directive

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

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

• bind

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

• inserted

  : 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

• update

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

• componentUpdated

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

• unbind

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

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

Meta charset="UTF-8">

<div class="ab" v-css="{'color':'red','font-size':'30px'}">
hello

大佬总结

以上是大佬教程为你收集整理的vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）全部内容，希望文章能够帮你解决vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。