vue-direactive 自定义指令

描述：

除了核心的v-model、v-show、v-if等等这些指令外，Vue也允许注册自定义指令。在Vue中代码复用和抽象的主要形式是组件，然而，有些情况下，仍然需要对普通DOM进行底层操作，这个时候就需要用到自定义指；

钩子函数：

bind：只调用一次，可以进行一次性初始化操作

inserted：在操作元素插入父节点时，（仅当有父节点的时候）

update：指令所在组件的VNode更新时调用，但是可能发生在其自VNode更新之前

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

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

钩子函数的参数：

el:指令所绑定的元素，可以直接操作DOM元素

binging:

        name:指令名，不包含v-钱准

        arg：传递给指令的参数，这是一个可选的参数，例如 v-demo:spl arg就是spl

        value:指令的绑定值：例如v-demo='1+1' value=2

        oldValue：指令绑定的前一个值，仅在update和componentUpdated中可用

        expression：表达式 例如：v-demo='1+1' expression就是1+1

        modifiers：修饰符对象

vnode:编译生成的vnode

oldvnode:上一个vnode

示例1：聚焦输入框

// 全局注册指令
Vue.direactive('focus',{
    inserted:function(el,binging,vnode,oldvnode){
         el.focus();
    }
})


//局部注册指令
export default{
    name:'XXX',
    directives:{
        inserted:function(el,binging,vnode,oldvnode){
            el.focus(); 
        }
    }
}


// 使用自定义指令
<input v-focus />

示例2：固定点布局（动态指令参数，函数简写）

Vue.direactive('fixed',function(el,binging){
    el.style.position = 'fixed';
    el.style[binging.arg] = binging.value + 'px';
})


<div v-fixed:top="200"></div>
<div v-fixed:left="200"></div>
<div v-fixed:right="200"></div>
<div v-fixed:bottom="200"></div>

动态指令参数

Vue.direactive('fixed',function(el,binging){
    el.style.position = 'fixed';
    el.style[binging.arg] = binging.value + 'px';
})


<div v-fixed:top="200"></div>
<div v-fixed:left="200"></div>
<div v-fixed:right="200"></div>
<div v-fixed:bottom="200"></div>

函数简写

Vue.direactive('fixed',function(el,binging){
    el.style.position = 'fixed';
    el.style[binging.arg] = binging.value + 'px';
})


<div v-fixed:top="200"></div>
<div v-fixed:left="200"></div>
<div v-fixed:right="200"></div>
<div v-fixed:bottom="200"></div>

函数简写，就是调用了bind和updateh钩子函数

对象字面量

需要多个参数的时候 ，可以传入一个标准的JavaScript对象字面量，指令函数可以接受所有合法的JavaScript表达式

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})