vue自定义指令的用法

1）全局注册

1.在main.js中通过Vue.directive全局注册一个指令

Vue.directive('demo', {
    bind: function (el, binding, vnode) {
      var s = JSON.stringify
      el.innerHTML =
        'name: '       + s(binding.name) + '<br>' +
        'value: '      + s(binding.value) + '<br>' +
        'expression: ' + s(binding.expression) + '<br>' +
        'argument: '   + s(binding.arg) + '<br>' +
        'modifiers: '  + s(binding.modifiers) + '<br>' +
        'vnode keys: ' + Object.keys(vnode).join(', ')
    }
})

2.在页面上使用

<div id="app">
    <div  v-demo:foo.a="message"></div>
</div>

3.data中定义变量message

var vm = new Vue({ //vue根实例
    el:'#app',
    data:{
        obj:{},
        inputval:'',
        message: 'hello!',
    },   
     
})

2）局部注册

1.直接在组件中注册

var vm = new Vue({ //vue根实例
    el:'#app',
     data:{
        obj:{},
        inputval:'',
        message: 'hello!',
    },

　　directives: {               

        pin:{

            bind: function (el, binding, vnode) {

            el.style.position = 'fixed'

            el.style.top = binding.value + 'px'

            

        }

        }       

      },

        })

2.在页面中使用

<p v-pin="200">Stick me 200px from the top of the page</p>

3）动态组件

var vm = new Vue({ //vue根实例
    el:'#app',
     data:{
        obj:{},
        inputval:'',
        message: 'hello!',
    },
　　directives: {               
        pin:{
            bind: function (el, binding, vnode) {
            el.style.position = 'fixed'
            var s = (binding.arg == 'left' ? 'left' : 'top')
            el.style[s] = binding.value + 'px'
            
        }
        }       
      },
        })

2.在页面中使用

<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>