Vue - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 7: | Zeile 7: | ||
app.mount('#myId'); // Vue controls now this id in the DOM | app.mount('#myId'); // Vue controls now this id in the DOM | ||
| − | + | ||
const app = Vue.createApp({ | const app = Vue.createApp({ | ||
| − | + | // DATA FUNCTION can hold key val pairs | |
| − | + | 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 | |
| + | }; | ||
} | } | ||
| + | // METHODS OBJECT HOLDS FUNCTIONS | ||
| + | methods: { | ||
| + | outputGoal(){ | ||
| + | const randomNumber = Math.random(); | ||
| + | if (randomNumber < 0.5) {return 'Learn Vue';} | ||
| + | else {return 'Master Vue'} | ||
| + | } | ||
| + | } | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 16. Dezember 2020, 22:07 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
const app = Vue.createApp({
// DATA FUNCTION can hold key val pairs
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
};
}
// METHODS OBJECT HOLDS FUNCTIONS
methods: {
outputGoal(){
const randomNumber = Math.random();
if (randomNumber < 0.5) {return 'Learn Vue';}
else {return 'Master Vue'}
}
}
});
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>
