Vue 自定义指令

<div>
<div class="card" v-pin:aaa.top.right="card1.pinned">
     <button @click="card1.pinned = !card1.pinned">定住\取消</button>
        监控到开发贷款的vajfkdjg
</div>
<div class="card" v-pin="card2.pinned">
      <a href="#" @click="card2.pinned = !card2.pinned"> pin it </a>
        监控到开发贷款的vajfkdjg
</div>
 监控到开发贷款的
等很多字......
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
//v-XXX 都是默认的指令 
//自定义组件,属性,也可以自定义指令
//自定义指令的修饰符和传参

Vue.directive("pin",function(el,binding){
    console.log(0,el)//指向的是有pin属性的div
    console.log(1,binding)//指向的是div的属性,默认的
    var pinned = binding.value;
    var position = binding.modifiers;
    var warning = binding.arg;
    if(pinned){
        el.style.position = "fixed";
        for(var key in position){
            if(position[key]){
                el.style[key] = "10px"
            }
        }

        if(warning==="true"){
            el.style.background = "red"
        }
        if(abc==="aaa"){
            el.style.border = "2px solid cyan"
        }
    }else{
        el.style.position = "static"
    }
})
//初始化父组件
    var parent = new Vue({
        el:"#app",
        data :{
            card1 : {
                pinned:false
            },
            card2 : {
                pinned:false
            },
            price:10,
        }
    })
</script>

打印的binding的结果

binding的结果