vue.directive-程序员宅基地

技术标签: vue  

1、vue.directive的作用

vue.directive是我们除了内置的指令(如v-model和v-show)之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,

 

2、vue.directive的使用场景

例如在图片加载完成前,用随机的背景色占位,图片加载完成后直接渲染出来,用自定义指令可以方便的实现该问题。还有高亮类的操作,可以将其封装为自定义指令。

 

3、使用vue.directive的3个demo

<template>
    <div>
        <div id="app"><input v-focus /></div>
        <hr>
        <p style="width:200px;height:200px" v-pin='colors'>trying</p> 
        <hr>
        <div id="app" v-demo:foo.a.b="message"></div>
    </div>
</template>
<script>
import Vue from "vue"; 

// 1、输入框聚焦
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
});

// 2、绑定背景颜色
Vue.directive('pin', function(el, binding) { //背景颜色
    el.style.background = binding.value
})

// 3、文字显示
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})


export default {
    name: "directive",
    data() {
        return {
            colors:"",//定义变量接收
            message:'left',
        }
    },
    created(){
        this.colors="pink"
    }
}
</script>

3.2、使用vue.directive的图片加载

<template>
  <div>
    <div v-img="url" style="width: 500px; height: 500px;"></div>
  </div>
</template>
<script>
import Vue from "vue"; //需要引入
Vue.directive("img", {
    bind:function(el){    
    var color = Math.floor(Math.random() * 1000000);
    el.style.backgroundColor = "#" + color;
    },
  inserted: function (el, binding) {
    var img = new Image();
    img.src = binding.value;
    img.onload = function () {
      el.style.backgroundImage = "url(" + binding.value + ")";
    };
  },
});

export default {
  name: "directive",
  data() {
    return {
      url: "../../../1.jpg",//据具体图片存储文件夹而定

    };
  },
};
</script>

 

4、vue.directive的官方概念

1、vue.directive 有两个参数:id(string)和[definition](function|object)

2、vue.directive有5种钩子函数,分别是:bind, inserted ,update, componentUpdated, unbind

2.1、bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置

2.2、inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定被插入文档中)

2.3、update:所在组件的vnode更新时调用,但是可能发生在其子vnode更新之前,指令的值可能发生了变化,也可能没有

2.4、componentUpdate:指令所在组件的vnode及其子vnode全部更新后调用

2.5、unbind:只调用一次,指令与元素解绑时调用

3、钩子函数参数

el,binding(name,value,oldValue,expression,arg,modifiers), vnode,oldvnode 

4、动态指令参数

指令的参数可以是动态的,例如,v-myDirective:[argument]="value"中,argument参数可以根据组件实例数据进行更新 

 5、对象字面量

指令需要多个值,可以传入一个js对象字面量,指令函数接受所有合法的js表达式

 

5、vue.directive使用体验

5.1、增长了不同的知识点,

5.2、update组件更新前的状态。componentUpdated组件更新后的状态

5.3、bind时父节点为null,bind是在dom书绘制前调用

5.4、inserted时父节点存在,在dom树绘制后调用

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lala_likesun/article/details/111208600

智能推荐

用subversion(SVN)进行版本管理 (一)_svn subversion 进行了版本控制-程序员宅基地

文章浏览阅读1k次。用subversion(SVN)进行版本管理 (转贴来自互联网 https://bbs.dreamz.org作者:upig)版本管理约定程序员编写程序的过程中,每个程序都会有很多不同的版本,这就需要程序员很好的管理代码,在需要的时间可以取出需要的版本,并且每个版本都有一个完整的说明。我们使用Sub Version(简称SVN)作为版本管理工具。这里着重介绍SVN作为跨平台的多人协作使用方法_svn subversion 进行了版本控制

python中科学计数法怎么表示_python科学计数法转换-程序员宅基地

文章浏览阅读2.9w次。python 输出数字,如何不以科学计数法输出?概述利用numpy设置输出选项即可 代码解析未使用numpy设置: import time # time 时间类 print(time*time*1000) #输出一个非常大的数字 #out: 6.30e1352 由此可以看到,默认输出是以科学计数方式输出使用numpy设置print的输出选项: impopython如何不通过格式化输出能够将一个数用..._python科学计数法

浏览器缩小出现滚动条_怎么做到缩小网页窗口时右边会多一个滑块-程序员宅基地

文章浏览阅读1.7k次。页面设置固定宽度,浏览器缩小后背景留白,裁切解决办法:_怎么做到缩小网页窗口时右边会多一个滑块

java map初始化并赋值_map初始化直接赋值-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏6次。**第一种方式:**static 块public class MapTest { private static final Map<String, String> myMap = new HashMap<String, String>(); static { myMap.put("张三", "北京"); myMap.put("李四", "上海"); }}最常规的初始化方式。第二种方式:双括号初始化 (匿名内部类)pu_map初始化直接赋值

UVM验证平台phase机制_final_phase-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏15次。简要概括uvm的phase机制知识点,适用于知识点复习以及梳理_final_phase

进行大数据爬取数据,存入Mongodb_mongodb里的数据放到网页-程序员宅基地

文章浏览阅读2.6k次。爬虫刚入门,对赶集网进行一次所有商品大数据的爬取使用了多线程,存到数据库里,目前不知道要爬多久from multiprocessing import Poolfrom channel_extract import channelfrom page_parsing import get_item_info, get_linksdef get_a_mongodb里的数据放到网页

随便推点

【Axure高保真原型】桥梁监控大屏可视化案例_设备实时检测axure原型案例-程序员宅基地

文章浏览阅读366次。今天和大家分享桥梁监控大屏可视化案例的原型模板,包括桥梁预警次数统计、预警类型分析、实时预警分析、通行趋势分析、通行类型分析、热门桥梁分析,里面包含多个高保真的图表模板(多柱状图组、滚动列表、多面积图、排名图、玫瑰图),具体效果可以点击下方视频观看_设备实时检测axure原型案例

自动化脚本之Debian 开机时运行通过expect自动执行串口命令_debian开机自动执行命令-程序员宅基地

文章浏览阅读3.7k次。在本文中,将探讨如何使用expect自动执行串口命令,并在Debian开机时运行这些命令。_debian开机自动执行命令

BST 二叉搜索树 非指针版_二叉搜索树无指针-程序员宅基地

文章浏览阅读863次。BST BST即为binarysearch tree 二叉搜索树为平衡树的基础,所以很要学习的必要。 BST的结点满足一个基本条件就是:结点k的左子树中所有值小于结点k的值,结点k的右子树的所有值大于结点k的值,显然这是一个递归定义的结构。 这个结构就使得中序遍历出来的序列即是一个升序的序列。一个优秀的二叉搜索树能够在log(n)的时间内进行查找、删除一个元素等。_二叉搜索树无指针

Ubuntu18.04 单网卡DHCP服务配置_ubuntu配置dhcp上网-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏7次。DHCP Ubuntu18.04_ubuntu配置dhcp上网

pandas dataframe选取某行或列做元素相乘_dataframe乘法-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏10次。dataframe整体做乘法时,不需要借助其他方法,直接a*b即可>>> import pandas as pd>>> import numpy as np>>> a = pd.DataFrame([1,2,3])>>> b = pd.DataFrame([2,5,3])>>> a*b 00 21 102 9但是,如果想要选取某行或某列做乘法,要使用loc方法,此时则会变成矩阵乘法_dataframe乘法

SQL注入——基于报错的注入(五)_报错注入两种方式-程序员宅基地

文章浏览阅读1k次。本章目的普及报错功能函数extractvalue()的用法,演示基于报错的SQL注入基本流程。实验环境攻击机:Pentest-Atk(1)操作系统:Windows10(2)安装的应用软件:Sqlmap、Burpsuite、FireFox浏览器及其插件Hackbar、等(3)登录账号密码:操作系统帐号Administrator,密码Sangfor!7890想机:A-SQLi-Labs(1)操作系统:Centos7(2)安装的应用软件:Apache、MySQL(MariaDB)、PHP:DV_报错注入两种方式

推荐文章

热门文章

相关标签