Question

这是我的代码：

<div id="app">
    <ul>
        <li v-for="task in tasks">@{{task.body}}</li>
    </ul>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:'go to  home',complete:true},
                {body:'watch tv',complete:true},
                {body:'go to bed',complete:true},
            ]
        }
    });
</script>

当我第一次加载页面时，如何从数据库加载数据'任务'，我使用php，vue js !!!

Answer 1

查看Vue api documentation。它充满了有用的信息：从基础知识到细节。它甚至可以搜索到它！

具体来说，熟悉Vue的lifecycle以及如何加入它。

您可能对ready或created生命周期挂钩感兴趣。

特别是，created钩子中的任何内容都将在编译Vue元素之前运行。所以你可能想把你的逻辑放在那里。

new Vue({
    el:"#app",
    data:{
        tasks:[
            {body:'go to  home',complete:true},
            {body:'watch tv',complete:true},
            {body:'go to bed',complete:true},
        ]
    },

    created: function() {
        /** Load task from database here **/
    }
});

Answer 2

要建立在asemahle的答案之上，您通常会在服务器端使用JSON端点来为vue.js数据模型提供数据。例如，如果您使用的是jQuery，它看起来像这样：

new Vue({
    el: "#app",
    data: {
        tasks: []
    },

    created: function() {
        var that = this;
        $.getJSON('/task-list', function(response) {
            that.tasks = response;
        });
    }

}）;

如何在页面首次加载时加载数据当我使用vue js时？

2 个答案: