简单的vue-resourse获取json并应用到模板

之前看了慕课网的vue入门，不是很懂怎么回事，跟官方文档写法都不同。

http://www.imooc.com/article/2688

于是后来看到keepfool大神的代码，虽然是xml，但非常清晰，而且我只是看了代码没看说明也懂了。

http://www.cnblogs.com/keepfool/p/5665953.html

不说废话上代码：(json内容是来自慕课网的)

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

    <head>
        <meta charset="UTF-8">
        <title>vue js</title>
        <style>
            .completed {
                text-decoration: line-through;
            }
            
            .something {
                color: red;
            }
        </style>
    </head>

    <body>

        <div class="container">
            <div id="app">
                <task-app :list="tasks">

                </task-app>
            </div>
            <template id="task-template">
                <ul>
                    <li v-for="task in list">
                        {{ task.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}
                    </li>
                </ul>
            </template>
            <script src="vue.js"></script>
            <script src="vue-resource.js"></script>

            <script>
                Vue.component('task-app', {//要应用的标签
                    template: '#task-template',//模板id
                    props: ['list']//请求的json
                })
            </script>
            <script>
                var demo = new Vue({
                    el: '#app',
                    data: {
                        tasks: '' //为空，可以是null
                    },
                    ready: function() {
                        this.getCustomers()
                    },
                    methods: {
                        getCustomers: function() {
                            this.$http.get('resourse.json')
                                .then(function(response) { //response传参，可以是任何值
                                    this.$set('tasks', response.data)
                                })
                                .catch(function(response) {
                                    console.log(response)
                                })
                        }
                    }
                })
            </script>
    </body>

</html>

 

posted @ 2016-08-12 22:55  一芥华  阅读(13467)  评论(2)  编辑  收藏  举报