// 自定義指定可操作DOM 注：必須加字首，v-
        Vue.directive('hello', {
            // 可以有引數el binding, binding中包括一些屬性：name,value,
            // binding.vlaue => 繫結的變數
            // binding.expression => 表示式  v-my-directive="1+1"
            // binding.arg => 傳參 v-on:click
            // binding.modifiers => 如: v-on:click.prevent 修飾符可以有多個
            bind(el, binding){//常用
                console.log(el, binding.arg);
                el.style.color = 'red';
                alert("指令第一次繫結到元素上時呼叫，只調用一次，可執行初始化操作");
            },
            inserted(){
                alert("被繫結元素插入到dom中時呼叫");
            },
            update(){
                alert("被繫結元素所在模板更新時呼叫");
            },
            componentUpdated(){
                alert("被繫結元素所在模板完成一次更新週期時呼叫")
            },
            unbind(){
                alert("指令與元素解綁時呼叫，只調用一次");
            }
        })

        //傳入一個簡單的函式，bind和update時呼叫
        Vue.directive('hello2', function(el){
            el.style.color = 'blue';
        })

        var vm = null;
        window.onload=function(){
            vm = new Vue({
                el:'#my',// 2.0不允許掛載到html,body元素上
                data:{
                    name:'moris',
                    age:22,
                    user:{
                        id:100
                    }
                },
                methods:{
                    /*change(){
                        this.name="tom"
                    }*/
                },
                directives:{// 自定義區域性指令
                    focus:{
                        inserted(el){     //當被繫結的元素插入到 DOM 中時
                            el.focus();
                        }
                    }
                }
            });
        }
 

<div id="my">
    <h3 v-hello>{{name}}</h3>
    <h3 v-hello:wbs>{{name}}</h3><!--wbs傳的引數-->
    <!-- <h3 v-hello:wbs.hehe.haha="age">{{name}}</h3> -->

    <h3 v-hello2>{{name}}</h3>
    <h3 v-hello2>{{age}}</h3>
    <h3 v-hello2>{{user.id}}</h3>

    <input type="text" v-focus><!--頁面載入時就成為焦點-->
    <br>
    <!-- <button @click="change">update</button> -->
</div>
 

//元件建立方式，全域性元件
//方式1
//先建立
var myComponent=Vue.extend({
    template:'<h2>hello</h2>'
});
//後引用
Vue.component('hello',myComponent);
//方式2
Vue.component('world',{
    template:'<h2>wold</h2>'
});
var vm = null;
window.onload=function(){
    vm = new Vue({
        el:'#my',// 2.0不允許掛載到html,body元素上
data:{
            name:'moris',
            age:22,
            user:{
                id:100
}
        },
        methods:{
            /*change(){
                this.name="tom"
            }*/
},
        components:{//區域性元件
'addressed':{
                template:'#myaddress',
                data(){
                    return{
                        addresse:"wuhan123",
                        arr:['a','b']
                    }
                }
            }
        }
    });
}

<div id="my">
    <hello></hello>
    <world></world>
    <addressed></addressed>
</div>