Wie lade ich die Daten beim ersten Laden der Seite? Wenn ich vue js verwende?

Question

Dies ist mein Code:

<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> 

, wie ich das aus der Datenbank ‚Aufgaben‘ Daten laden soll, wenn die Seite zum ersten Mal laden, benutze ich php, vue js !!!

Answer 1

Überprüfen Sie die Vue api documentation. Es ist voll mit nützlichen Informationen: von den Grundlagen bis zum Wesentlichen. Es ist sogar suchbar!

Spezifisch, machen Sie sich mit der lifecycle von Vue, und wie Sie es einhaken.

Sie sind wahrscheinlich interessiert an der ready oder created Lifecycle-Hook.

Insbesondere wird alles im created -Hook ausgeführt, bevor das Vue-Element kompiliert wird. Vielleicht möchten Sie Ihre Logik dort platzieren.

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

Um auf asemahle Antwort zu bauen, dann würden Sie verwenden in der Regel einen JSON Endpunkt auf dem serverseitigen Daten für das vue.js Datenmodell zu liefern. Wenn Sie jQuery wurden unter Verwendung von, zum Beispiel, würde es in etwa so aussehen:

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

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

});