Vue.js kurz & gut

KAPITEL 3

Templates

Das Objekt data verwaltet die Daten der Vue-Instanz. Aber wie werden diese Daten an der richtigen Stelle im Browser dargestellt? Hierfür benutzt Vue eine spezielle Template-Syntax, die auf HTML basiert. Mit ihr können einzelne Datenattribute deklarativ an das DOM gebunden werden.

Wie genau das Template für eine Vue-Instanz definiert wird, haben wir bereits im ersten Kapitel dieses Buchs gesehen. Die für das Template relevanten Angaben sind hier fett markiert:

<div id="app">

{{ myMessage }}

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

myMessage: 'Hello Vue!'

}

})

</script>

Innerhalb des HTML der Anwendung wurde eine eindeutige ID – hier "app" – für ein HTML-Element festgelegt. Gleichzeitig wird diese ID im Attribut ...