Vue - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „<syntaxhighlight lang="javascript"> // create App const app = Vue.createApp(); // mount a html region // app.mount('cssSelector'); app.mount('#myId'); // DATA…“) |
|||
| Zeile 1: | Zeile 1: | ||
| + | == Basics == | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// create App | // create App | ||
| Zeile 14: | Zeile 15: | ||
} | } | ||
}); | }); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | <syntaxhighlight lang="html5"> | ||
| + | <div id="myId"> | ||
| + | <h1>Hello World</h1> | ||
| + | <p>{{ myVar }}</p> <!-- outputs "Learn Vue" --< | ||
| + | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 16. Dezember 2020, 21:38 Uhr
Basics
// create App
const app = Vue.createApp();
// mount a html region
// app.mount('cssSelector');
app.mount('#myId');
// 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...)
};
}
});
<div id="myId">
<h1>Hello World</h1>
<p>{{ myVar }}</p> <!-- outputs "Learn Vue" --<
</div>
