进修笔记：
自定义指令
自定义指令
自定义指令的注册要领分为全局注册和部分注册，比方注册一个v-focus指令，用于在<input>、<textarea>元素初始化时自动取得核心，两种写法分别是：
//全局注册
Vue.directive('focus', {});
//部分注册
new Vue({
el: '#app',
directives: {
focus: {}
}
});
自定义指令的选项是由几个钩子函数构成，每一个都是可选的：
-
bind：只挪用一次，指令第一次绑定到元素时挪用，用这个钩子函数能够定义一个在绑定时实行一次的初始化行动。 -
inserted：被绑定元素插进去父节点时挪用（父节点存在即可挪用，没必要存在于document中）。 -
update：被绑定元素地点的模板更新时挪用，而不管绑定值是不是变化。经由过程比较更新前后的绑定值，能够疏忽没必要要的模板更新。 -
componentUpdate：被绑定元素地点模板完成一次更新周期时挪用。 -
unbind：只挪用一次，指令与元素解绑时挪用。
能够依据需求在差别的钩子函数内完成逻辑代码。在元素插进去父节点时就挪用，用到的最好是inserted。
<div id="app">
<input type="text" v-focus>
</div>
Vue.directive('focus', {
inserted(el) {
el.focus();
}
});
new Vue({
el: '#app',
});
翻开页面，input输入框自动取得核心，成为可输入状况。
每一个钩子函数都有几个参数可用：
-
el指令所绑定的元素，能够用来直接操纵DOM binding一个对象，包括以下属性：-
name指令名，不包括v-前缀 -
value指令的绑定值 -
oldValue指令绑定的前一个值，仅在update和componentUpdate钩子中可用。不管值是不是转变都可用。 -
expression绑定值的字符串情势。 -
arg传给指令的参数。 -
modifiers一个包括修饰符的对象。
-
-
vnodeVue编译天生的假造节点。 -
oldVnode上一个假造节点仅在update和componentUpdate钩子中可用。
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”QxKQqY” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-自定义指令” class=”codepen”>See the Pen Vue-自定义指令 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
假如须要多个值，自定义指令能够传入一个JavaScript对象字面量。
<div id="app">
<div v-test="{msg:'hello',name:'Andy}"></div>
</div>
开辟一个及时时候转换指令v-time
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”wXoMpg” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-及时时候转换指令” class=”codepen”>See the Pen Vue-及时时候转换指令 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
Time.getFormatTime()要领就是自定义指令v-time所须要的，入参为毫秒级时候戳，返回已整理好时候花样的字符串。
在bind钩子里，将指令v-time表达式的值binding.value作为参数传入TimeFormatTime()要领获得花样化时候，再经由过程el.innerHTML写入指令地点元素。定时器el.__timeout__每分钟触发一次，更新时候，并且在unbind钩子里清撤除。
总结：在编写自定义指令时，给DOM绑定一次性事宜等初始行动，发起在bind钩子内完成，同时要在unbind内消除相干绑定。
