vue.js components 多個組件的呈現 @igogo

這是一個利用vue.js 將json data 取回來並依點擊的事件讓不同component 顯示不同的內容的範例

data.json

  {
    "_id": "58379018146a09705a1dd0eb",
    "guid": "aa2361a6-c49c-46a0-837d-5bfff6924b89",
    "isActive": true,
    "age": 22,
    "car": "gogoro",
    "pet": "cat"
  },
  {
    "_id": "583790181eaefda6f6f74c93",
    "guid": "e694dafa-5f8d-4d95-8d9f-ef5d7f4df589",
    "isActive": false,
    "age": 24,
    "car": "toyota",
    "pet": "doggy"
  },
  {
    "_id": "58379018447bc827cdd99557",
    "guid": "7dbb0102-e8e8-4ec6-8c93-eb747d33eff3",
    "isActive": true,
    "age": 39,
    "car": "kymco",
    "pet": "pig"
  }
]

註冊組件

 Vue.component('car', {
            props: ['message', 'items'],
            template: '<div>{{message}} cars, which are <ul><li v-for="item in items">{{item.car}}</li></ul></div>',
        });

        Vue.component('pet', {
            props: ['message', 'items'],
            template: '<div>{{message}} pets, which are <ul><li v-for="item in items">{{item.pet}}</li></ul></div>',
        });

props 裡的message 及items 是由父組件來的

父組件

var app = new Vue({
            el: '#app',
            data: {
                currentView: '',
                message: 'My frends have ',
                items: []
            },
            methods: {
                getData: function(currentView) {
                    this.currentView = currentView;
                    this.$http.get('data.json', {
                            params: {
                                ID: 12345
                            }
                        })
                        .then(function(response) {
                            this.items = response.data;

                            console.log(this.items);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });

                }
            }
        });

預設的view 是父組件，當使用者按下按鈕後，會因觸發不同的事件產生不同的結果，currentView的值會因此對應到

 <component v-bind:is="currentView" :message="message" :items="items">
            <!-- component changes when vm.currentView changes! -->
  </component>

:items="items" 是 v-bind:items="items" 的縮寫讓字面更為簡潔

完整寫法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <!-- Latest compiled and minified JavaScript -->
    < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin = "anonymous" >
    </script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/vue-resource@1.0.3/dist/vue-resource.min.js"></script>
</head>

<body>
    <div id="app">
        <component v-bind:is="currentView" :message="message" :items="items">
            <!-- component changes when vm.currentView changes! -->
        </component>
        <button @click="getData('car')" class="btn">car</button>
        <button @click="getData('pet')" class="btn">pet</button>
    </div>
    <footer>
      
        <script type="text/javascript">
        Vue.component('car', {
            props: ['message', 'items'],
            template: '<div>{{message}} cars, which are <ul><li v-for="item in items">{{item.car}}</li></ul></div>',
        });

        Vue.component('pet', {
            props: ['message', 'items'],
            template: '<div>{{message}} pets, which are <ul><li v-for="item in items">{{item.pet}}</li></ul></div>',
        });

        var app = new Vue({
            el: '#app',
            data: {
                currentView: '',
                message: 'My frends have ',
                items: []
            },
            methods: {
                getData: function(currentView) {
                    this.currentView = currentView;
                    this.$http.get('data.json', {
                            params: {
                                ID: 12345
                            }
                        })
                        .then(function(response) {
                            this.items = response.data;

                            console.log(this.items);
                        })
                        .catch(function(error) {
                            console.log(error);
                        });

                }
            }
        });
        </script>
    </footer>
</body>

</html>

vue.js components 多個組件的呈現

URL Link //n.sfs.tw/10292

2016-11-25 17:32:23 By igogo