Vue - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(→Basics) |
|||
| Zeile 11: | Zeile 11: | ||
data() { //or data: function(){...} | data() { //or data: function(){...} | ||
return{ // data always returns an object | return{ // data always returns an object | ||
| − | myVar: 'Learn Vue'// can store keys with vals of every type(bool, object, string...) | + | myVar: 'Learn Vue',// can store keys with vals of every type(bool, object, string...) |
| + | myLink: 'https://viewjs.org | ||
}; | }; | ||
} | } | ||
| Zeile 20: | Zeile 21: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div id="myId"> | <div id="myId"> | ||
| − | < | + | <h3>Interpolation</h3> |
<p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" --> | <p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" --> | ||
| + | <h3>Binding</h3> | ||
| + | <p>Use bindings to set attributes. I.e. set the href attribute. {{myLink}} wouldn't work inside of tags.</p> | ||
| + | <p>Learn more <a v-bind:href="myLink">about Vue</a></p> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 16. Dezember 2020, 21:54 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...)
myLink: 'https://viewjs.org
};
}
});
Interpolation
<div id="myId">
<h3>Interpolation</h3>
<p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" -->
<h3>Binding</h3>
<p>Use bindings to set attributes. I.e. set the href attribute. {{myLink}} wouldn't work inside of tags.</p>
<p>Learn more <a v-bind:href="myLink">about Vue</a></p>
</div>
