VUE中的自定义指令

一、Vue指令的特征：

• Vue指令名必须以v-开头。
• Vue指令书写在HTML标记对内部，像HTML属性一样使用。
• 有的指令必须具备取值，有的指令可以没有取值。v-show=“isShow” v-once v-pre
• 指令可以有修饰符：修饰符用 . 连接到指令的后面。v-model.number=“nick”
• 指令可以有参数：参数用 : 连接到指令的后面。v-bind:src=“url” v-on:click=“btnClick”

二、自定义指令的注册：

• 局部指令：在Vue实例内部使用 directives:{}
• 全局指令：Vue.directive(‘指令名’,{})

注意：注册指令时指定的指令名，在使用时必须给前面加一个v-前缀。

三、指令的选项：

指令的选项全部都是钩子函数。

• bind：只调用一次，初始化时调用。
• inserted：指令所绑定的元素插入到父元素中时。
• update：当指令的取值发生变化时调用该函数。
• unbind：只调用一次，指令和元素解除绑定时调用。

四、指令选项的钩子函数所具备的参数：

• el，被绑定的元素。

例：制作一个v-focus的指令，当某个文本框使用该指令时则自动获得鼠标焦点。
    Vue.directive(‘focus’,{
       inserted:function(el){
          el.focus();
		}
	})
    <input type=“text” v-focus />

• binding，这是一个对象，可以展示出指令代码的各个部分。
  v-focus:abc.number.prevent="5*7"
  • name，指令名，不带v-的指令名部分。【focus】
  • value，将指令的取值看做表达式并得出最后的计算结果。【35】
  • expression，将指令的取值看做字符串直接返回。【5*7】
  • arg，返回指令的参数。【abc】
  • modifiers，返回指令的所有修饰符组成的对象。【{number:true,prevent:true}】

五、自定义指令实例：

• 例1：制作一个下拉菜单，单击其他位置让菜单收回。

node1.contains(node2)：判断node2是否在node1内部存在。

利用修饰符来实现按下ESC键让菜单收回。

<div class=“dropdown-menu” v-menu-up.esc=“menuClose”></div>

• 例2：实现发布时间的显示。
  

function Time(){}
// 当前时间戳
Time.prototype.getUnix=function(){}
// 今天 0:0:0 的时间戳
Time.prototype.getTodayUnix=function(){}
// 本月1日 0:0:0 的时间戳
Time.prototype.getMonthUnix=function(){}
// 正常格式的日期
Time.prototype.getFullDate=function(time){
}
// 转换时间
Time.prototype.getFormatTime=function(timestamp){
	var message='';
	return message;
}

• 例3：在图片成功加载之前加载颜色。

随机颜色：var color=‘#’ + Math.floor(Math.random()*(max-min+1)+min);