详解vue中点击空白处隐藏div的实现(用指令实现)

前端之家收集整理的这篇文章主要介绍了详解vue中点击空白处隐藏div的实现(用指令实现)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简单想应该怎么实现?

1、肯定是给document增加一个click事件监听 2、当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现。

简单介绍vue指令

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  1. bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  2. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  3. update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  4. componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用
  5. unbind:只调用一次,指令与元素解绑时调用

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

代码实现

创建指令对象,分析放在代码

显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章