自定义指令

vue为我们提供了自定义指令功能

自定义指令语法规则

Vue.directive('自定义指令名' , {
   inserted: function(el) {
        // el 获取到的元素
       el.focus();
    } 
})

　　带参数的自定义指令

<input type="text" v-color="col">
<script>
    Vue.directive('color', {
           inserted: function(el, binding) {
               el.style.backgroundColor = binding.value.color;
            }
        })
    var vm = new Vue({
            el: '#app',
            data: {
                col: {
                    color: 'red'
                }
            },
        })
</script>

　局部自定义指令 （组件中接受一个directives的选项）

<input type="text" v-focus>
<input type="text" v-color="col">
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                col: {
                    color: 'orange'
                }
            },
            directives: {
                color: {
                    inserted: function(el, binding) {
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
                    inserted: function(el) {
                        el.focus();
                        
                    }
                }
            }
        })
    </script>

　　

自定义指令用法 (在自定义指令名前面加v-)

<input type="text" v-color="col">

<input type="text" v-focus>