详解vue中点击空白处隐藏div的实现（用指令实现）-创新互联

简单想应该怎么实现？

创新互联建站-专业网站定制、快速模板网站建设、高性价比响水网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式响水网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖响水地区。费用合理售后完善，十多年实体公司更值得信赖。

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

简单介绍vue指令

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

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

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

代码实现

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：详解vue中点击空白处隐藏div的实现（用指令实现）-创新互联
本文网址：http://bjjierui.cn/article/coeogi.html