Vue自定义指令及实现图片懒加载指令

朱雀 2022-09-12 14:52 379阅读 0赞

## 一. 速识概念： ##

在我们使用 Vue 的过程中，遇到了很多方便我们操作的vue内置指令，以 v-xxx 表示。比如有 v-module，v-for，v-if，v-show 等等，每个指令都能实现一些相对应的功能。但是，在实际的开发过程中，可能这些内置指令并不能满足所有的需求，这时候，就需要用到 Vue 给我们提供的一个强大又灵活的功能「 自定义指令 」。  
  同样，vue自定义指令可以分为全局注册指令和局部注册指令。下面我将以最简单的例子带你认识vue自定义指令。

## 二.全局注册指令： ##

比如，我们想要定义一个 **v-color=" " 指令** ，标签引用这个指令后可以改变自身背景颜色。一个全局注册指令的基本语法如下：

Vue.directive('color',{ 
       bind(){ },
       inserted(){ },
       update(){ }, 
       componentUpdated(){ },
       unbind()
    })

第一个参数，color 为自定义指令的名称，不用带 v- 。第二个参数为一个对象，其中有5个钩子函数，你可以类似于vue的生命周期钩子函数，它们也是被绑定元素各个周期会触发的钩子函数。每个的执行期间如下：

> bind()：只调用一次，指令第一次绑定到HTML元素时调用。在这里可以进行一次性的初始化设置。
> 
> inserted()：当指令绑定的元素插入到父节点中的时候触发。
> 
> update()：当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发。
> 
> componentUpdated()：当 update() 执行完毕之后触发。
> 
> unbind()：只调用一次，指令与元素解绑时调用。

其实，我们最常用的就是 bind（）和 inserted（），也可以理解为在 bind（）里设置被绑定元素的css样式，在 inserted（）里设置被绑定元素的 js 操作。  
 我们的 v-color=" " 指令 ，标签引用这个指令后可以改变自身背景颜色，只定义bind（）函数就行，如下：

<div v-color="'red'">北极光之夜。</div>
    -------------------------------------------
        Vue.directive("color", { 
            bind(el, binding) { 
              console.log(el);
              console.log(binding);
            },
          });

其中，每个钩子函数都有4个参数，我们只讨论 el 和 binding ，打印看看是什么：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
  可以看到，el 就是使用该指令的元素，而binding为一个对象，它保存着很多值，根据vue官方文档，其属性值包括：

> name：指令名，不包括 v- 前缀。
> 
> value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
> 
> oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
> 
> expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
> 
> arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
> 
> modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 \{ foo: true,  
> bar: true \}。

那么就很简单了，我们想利用 v-color 自定义指令把背景颜色改为红色可以如下设置：

<div v-color="'red'">北极光之夜。</div>
    -------------------------------------------
        Vue.directive("color", { 
            bind(el, binding) { 
               el.style.cssText = `background-color:${ binding.value}`;
            },
          });

效果成功：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]  
**函数简写形式：**  
  在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。这时候函数可以简写如下：

Vue.directive("color", function (el, binding) { 
              el.style.cssText = `background-color:${ binding.value}`;
          });

## 三.局部注册指令： ##

上面我们定义的全局自定义指令是在Vue实例上定义的，全局可以，如果我只想在某个组件上使用也是可以的，vue组件中规定了directives方法，与data和methods这些同级别，如下：

<div id="app">
          <div v-color="'red'">北极光之夜。</div>
        </div>
     --------------------------------------
      var app = new Vue({ 
        el: "#app",
        data: { },
        directives: { 
          color: { 
            bind(el, binding) { 
              el.style.cssText = `background-color:${ binding.value}`;
            },
          },
        },
      });

可以看到跟全局也是差不多写法，就是换个位置写而已。

## 四：图片懒加载： ##

我们可以用自定义指令实现图片懒加载。这里只介绍写法，关于图片懒加载原理可以看我另一篇文章，对懒加载原理和原生js实现分析的很全面：[前端必会的图片懒加载，你造吗？][Link 1] 。地址 https://auroras.blog.csdn.net/article/details/119789741 看完了再回来看这里就一目了然啦~

下面将用到 Intersection Observer 观察器接口实现懒加载。

1.建一个HTML单页面，引入vue，然后new一个vue实例，变量moren为图片默认地址，arrSrc数组为图片真实地址：

var app = new Vue({ 
            el: "#app",
            data: { 
              moren: "img/0.png",
              arrSrc: [
                "img/1.jpg",
                "img/2.jpg",
                "img/3.jpg",
                "img/4.jpg",
                "img/5.jpg",
                "img/6.jpg",
                "img/7.jpg",
                "img/8.jpg",
              ],
            },
          });

2.使用 v-for 渲染 arrSrc 数组，但是图片的src都设为moren：

此时页面效果如下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]

3.定义 v-lazy = “图片地址” 自定义指令：

实现：

Vue.directive("lazy", { 
            inserted(el, binding) { 
              //定义一个观察器，entries为状态改变元素的数组
              let observer = new IntersectionObserver((entries) => { 
                // 遍历
                for (let i of entries) { 
                  // 如果改元素处于可视区
                  if (i.isIntersecting > 0) { 
                    // 获取该元素
                    let img = i.target;
                    // 重新设置src值
                    img.src = binding.value;
                    //取消对该元素的观察
                    observer.unobserve(img);
                  }
                }
              });
              // 为 img 标签添加一个观察
              observer.observe(el);
            },
          });

效果，可以看到右边控制台，当图片出现在可视区时才加载：

![在这里插入图片描述][b4b977fec057425c9da9131e0e1509f1.gif_pic_center]

## 五.总结： ##

上面就是vue自定义指令的一些简单用法与应用的全部内容啦。总的来说，Vue 给我们提供的一个强大又灵活的功能「 自定义指令 ，可以分为全局注册指令和局部注册指令。全局注册为 Vue.directive(‘name’,\{ bind(el,binding)\{\} ,inserted(el,binding)\{\}\})。其中，el为该元素，binding为一个对象等等。当然，vue自定义指令肯定没这么简单，在一些复杂用法上是很难的，只能说学无止境了~

下次见啦~

[我的哔哩哔哩空间][Link 2]  
Gitee仓库地址：[全部特效源码][Link 3]  
Q群聊（欢迎）：629596039  
其它文章：  
**~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 4]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/2f20b790db0f49049098e590af3cbdae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/f122ae227f864c1ab3caaf5248b757eb.png
[Link 1]: https://auroras.blog.csdn.net/article/details/119789741
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YyX5p6B5YWJ5LmL5aSc44CC_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/7555f56c1d5544bf8216b74dca4bc9e0.png
[b4b977fec057425c9da9131e0e1509f1.gif_pic_center]: /images/20220828/835c62aae9754ae985695991d3bb95fb.png
[Link 2]: https://space.bilibili.com/176586698
[Link 3]: https://gitee.com/aurora-in-winter/blog
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 4]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343