vue之自定义指令

在vue中有很多指令，例如：v-on v-bind v-model v-for v-if等等，通过这些指令，可能也能最终达到我们需要的效果，为何要弄个自定义指令呢？

通过使用自定义指令，我们会发现它对dom的操作更加方便、更灵活、可复用（全局）。接下来就详细介绍一下自定义指令的使用。

一、自定义指令的分类：

1 全局自定义指令：
顾明私有，全局的元素都可以使用这个指令，通过一个小栗子我们简单了解一下怎么创建一个全局的自定义指令。

功能需求： 通过自定义指令实现对复选下拉框的某一个元素默认选中效果

// 全局指令  
//自定义指令名称sel  
//el参数可以获取当前的dom元素  
//inserted中进行指令的定义
Vue.directive('sel',{
    inserted(el,pos){
    	// 实现对第二个元素的默认选中
        el.children[1].selected = true;
    }
})
//下拉框
// 通过v-sel调用自定义的全局指令v-sel
<select name="" id="fruits" multiple v-sel>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橘子">橘子</option>
</select>

效果图：可以发现香蕉默认是选中状态

到此，一个简单的自定义指令就完成了（从实现到调用）。由于是全局的，谁（所有的dom元素）都可以调用，如果在实际应用中不能满足业务需求，那就创建局部的呗，每个组件独享自定义的指令。

2 局部自定义指令

在组件中进行定义，通过directives属性，可以同时自定义多个指令，而且可以同时引入多个指令，太爽了！！！来看看如何实现的。

//创建一个组件，在组件中通过directives来创建两个自定义指令
Vue.component('sss',{
	// 模板 可以看到引用了 v-focus v-def两个指令
    template:`
         <input type='text' v-focus v-def>
    `,
    directives:{
    	//初始化聚焦
         focus:{
             inserted(el,pos){
                 el.focus()
             }
         },
         // 默认的value
         def:{
             inserted(el){
                 el.value='aaaaaa';
             }
         }
    }
})
//引用组件
<sss></sss>

看效果：初始化聚焦 默认的value效果都出来了，这样一来操作dom就简单多了

二 、自定义指令中传参
通过设置inserted的第二个参数可以接收传过来的值

// 传值 
 <input type='text' v-focus="{username:'sh',age:23}" v-def>
// 接收
focus:{
    inserted(el,pos){
    // 打印结果  ：   {username: "sh", age: 23}
        console.log(pos.value)
        el.focus()
    }
}

对pos参数进行打印，发现可以从value进行取值

pos参数各个属性的说明（引自vue官网）

binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

以上就是vue自定义指令的简单使用，如果疏漏，请留言指出。