Vue - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(→Basics) |
(→Basics) |
||
| Zeile 13: | Zeile 13: | ||
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' | |
| − | } | + | }; |
| + | } | ||
| + | // METHODS OBJECT HOLDS FUNCTIONS | ||
| + | methods: { | ||
| + | outputGoal(){ | ||
| + | const randomNumber = Math.random(); | ||
| + | if (randomNumber < 0.5) {return 'Learn Vue';} | ||
| + | else {return this.myVar2} // 'this' works because vue merges all data and methods in a global vue object | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
}); | }); | ||
Version vom 16. Dezember 2020, 22:18 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 this.myVar2} // 'this' works because vue merges all data and methods in a global vue object
}
}
});
<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>
<p>{{ outputGoal() }}</p><!-- functions or simple js expresseions like 1+1 work to -->
</div>
