【Vue】Component區域註冊、全域註冊、x-template

1.區域註冊 （寫在new Vue裡面）

    <div id="app">
        <people v-for="item in data" :people="item"> </people>
    </div>

    var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: "jack",
                age: 20
            }, {
                name: "neo",
                age: 23
            }, {
                name: "hao",
                age: 25
            }]
        },
        components: {
            'people': {
                template: '<ul><li>{{people.name}}</li><li>{{people.age}}</li></ul>',
                props: ["people"]
            }
        } 寫在這裡，如果有一個新的vue，或是領域之外的東西就無法用
    })

2.全域註冊 Vue.components

    <div id="app">
        <people v-for="item in data" :people="item"> ->接收item的資料傳到[people] </people> 
    </div>

    Vue.component(
         'people': {
                template: '<ul><li>{{people.name}}</li><li>{{people.age}}</li></ul>',
                props: ["people"] 陣列接收資料
            }
        } 全域註冊，就可以隨便用。
    )

   var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: "jack",
                age: 20
            }, {
                name: "neo",
                age: 23
            }, {
                name: "hao",
                age: 25
            }]
        })

3.使用x-template

把模板放在template太難維護了，放在script好了

    <div id="app">
        <people v-for="item in data" :people="item"> </people>
    </div>

<script type="text/x-template" id="people">
    <ul>
        <li>{{people.name}}</li>
        <li>{{people.age}}</li>
    </ul>
</script>

    Vue.component(
        'people', {
            template: "#people",
            props: ["people"]
        }
    )

   var app = new Vue({
        el: '#app',
        data: {
            data: [{
                name: "jack",
                age: 20
            }, {
                name: "neo",
                age: 23
            }, {
                name: "hao",
                age: 25
            }]
        })

​