vue的自定义指令与实例

前言

写这篇的原因来源于面试题，具体内容可参考官方文档

简介

vue 除了核心功能默认内置的指令（v-if,v-model,v-show…）之外,还可以自定义自己需要的指令进行复用，对普通 DOM 元素进行底层操作；你可以注册全局指令（Vue.directive( id, function (el, binding) {} ) 这个是简写，下面有全的）和局部指令（Vue实例中添加 directives 对象 数据注册局部自定义指令），这点和组件一样。

钩子函数

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

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

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode (Vue 编译生成的虚拟节点) 更新时调用。

componentUpdated：指令所在组件的 VNode及其子 VNode 全部更新后调用。

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

钩子函数参数

指令钩子函数会传入以下参数：

el： 指令所绑定的元素，可以直接用来操作Dom

binding： 一个对象，包含以下的属性（property）:

• name: 指令名
• value： 指令的绑定值
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。值是否改变都可用。
• expression：字符串形式的指令表达式。
• arg：传给指令的参数，可选。
• modifiers：一个包含修饰符的对象。

vnode： Vue 编译生成的虚拟节点

oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

全局指令

Vue.directive( id, {bind:function (el, binding) {} })，一般写在公共/主的.js文件（index.js/main.js），在 .vue文件中调用

• 第一个参数为自定义指令名称，不需要加 v- 的前缀，会默认加上，使用的时候记得加上**v-**就好
• 第二个参数可以是对象，也可是指令函数

例子: 时间格式化（时间戳到日期转换）

Vue.directive("time",{
	bind:function(el,binding){
		//把指令的绑定值，赋值给getTime 
		let getTime = new Date(binding.value)
		//在个dom 中插入这个格式化之后的值
		el.innerHTML =  `${getTime.getFullYear()}-${getTime.getMonth()+1}-${getTime.getDate()}`;
	}
})
 //调用 使用v-time
<td v-time="Date"></td>    // Date为日期字段名，非固定

局部指令

局部指令就比较简单了，通过在Vue实例中添加 directives 对象数据注册局部自定义指令就可；就是说在.vue 的文件中创建使用；

例子：在图片资源还没加载出来时，先显示默认图，当资源真正加载出来之后，再把真实图片放置到对应的位置上并显示。

<template>
  <div id="app" class="test">
  	 <img src="../assets/image/test.png" alt="默认图" v-img="url">
  </div>
</template>
<script>
export default {
  data () {
    return {
     url:'http://********/test.png', //图片路径
    }
  },
  directives:{
  	img:{
	    inserted: function (el,binding) {// 指令的定义
	       //el为绑定元素，可以对其进行dom操作
	       //binding 一个对象，包含很多属性属性
	       console.log(binding)	     
           el.setAttribute("src", binding.value); 
	    }
  	}
  },
  mounted(){},
  methods:{}
}
</script>