ページが最初に読み込まれたときにデータを読み込む方法vue jsを使用するときは？

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ライフサイクルフックのいずれかに興味を持っています。特に

Vueの要素がコンパイルされる前に、createdフックで何が実行されます。だからあなたのロジックをそこに置くことができます。 asemahleの答えに構築するには

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

、あなたは一般的にvue.jsデータモデルのためのデータを提供するために、サーバー側でJSONのエンドポイントを使用すると思います。たとえば、jQueryを使用していた場合、次のようになります。

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

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

}）;