Vue - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 5: Zeile 5:
 
// mount a html region
 
// mount a html region
 
// app.mount('cssSelector');
 
// app.mount('cssSelector');
app.mount('#myId');
+
app.mount('#myId'); // Vue controls now this id in the DOM
  
 
// DATA OBJECT
 
// DATA OBJECT

Version vom 16. Dezember 2020, 21:41 Uhr

Basics

// create App
const app = Vue.createApp();
// mount a html region
// app.mount('cssSelector');
app.mount('#myId'); // Vue controls now this id in the DOM

// DATA OBJECT
const app = Vue.createApp({
    data() { //or data: function(){...}
        return{ // data always returns an object
            myVar: 'Learn Vue'// can store keys with vals of every type(bool, object, string...)
        }; 
    }
});

Interpolation

<div id="myId">
<h1>Hello World</h1>
<p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" -->
</div>