head代码：

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>

body部分html代码：

    <div id="app">
        <div id="s" v-defaultvalue></div>
        <span v-showing="show">我是自定义showing指令绑定的span</span>
    </div>

script部分的代码：

<script>
        //同样使用Vue.directive({})可声明一个全局变量
        Vue.directive(
            'defaultvalue',{
                //inserted 为钩子函数，即为在执行某项操作时触发的方法，可在自定义指令中使用的有：
                //bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
                //inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
                //update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
                //componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
                //unbind: 只调用一次， 指令与元素解绑时调用。
                inserted:function(el){
                    //目标元素作为参数传过来
                    el.innerHTML="我是一个自定义指令绑定的div"
                }
            }
        );
        new Vue({
            el:"#app",
            data:{
                show:false
            },
            directives:{
                //创建局部的自定义指令，写一个与v-show一样效果的v-showing
                //钩子函数的参数主要有四个
                //el:当前操作的元素标签
                //binding:绑定的各项值主要有
                    //name: 指令名，不包括 v- 前缀。这里是showing
                    //value:指令的绑定值，这里是false
                    //oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。如果有操作把this.showing改为true，此时就为false
                    //expression: 绑定值的表达式或变量名。假使我绑定是“show==true”,那么expression就是s“how==true”
                    //arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
                    //modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
                //vnode: Vue 编译生成的虚拟节点。
                //oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
                showing:{
                    inserted:function(el,binding){
                        console.log(binding.value==true);
                        if(binding.value==true){
                            el.style.display='block';
                        }else{
                            el.style.display='none';
                        }
                    }
                }
            }
        });    
    </script>