vue自定义指令的用法

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(‘, ‘)
    }
})

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

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

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

        })

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

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‘
            
        }
        }       
      },
        })

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