Jak pracovat s daty a metodami ve Vue instanci si povíme v tomto díle. Při vytváření Vue instance můžeme definovat více objektů, například data a metody. Jak pracovat s daty jsme si již ukázali v díle Integrace Vue do projektu.
Data
Hodnoty, které nastavíme v objektu data jsou předány Vue instanci při jejím vytváření jako výchozí. Jedná se ale o reaktivní vlastnosti. To znamená že pokud v průběhu změníme hodnotu v datech, tak se automaticky aktualizuje i na místě kde je hodnota vypisována. Oproti jQuery nemusíme řešit znovu vykreslení.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ name }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'David'
}
})
</script>
</html>Metody
Kromě dat můžeme do instance Vue.js přidat i objekt methods. Tento objekt bude mít jako klíče názvy metod a jako hodnoty functions. Příklad lze vidět na jednoduché ukázce.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ name }}, {{ getNameSurname() }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'David'
},
methods: {
getNameSurname(){
return 'David Krupička';
}
}
})
</script>
</html>
Metody můžeme volat jednoduše {{ nazevMetody() }} a je možné jim předávat i parametry. Na dalším příkladu si můžete všimnout volání metody, které předáváme dva parametry. Metoda spojuje tyto stringy a vrací je jako jeden string.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ name }}, {{ getNameSurname("David", "Krupička") }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'David'
},
methods: {
getNameSurname(name, surname){
return name + surname;
}
}
})
</script>
</html>
V metodách můžeme také pracovat s daty a to pomocí klíčového slova this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ getName() }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'David'
},
methods: {
getName(){
return this.name;
}
}
})
</script>
</html>
Reaktivní systém Vue
Ukázali jsme si jak fungují data a metody. Nyní se podíváme, jak pracovat s reaktivním systémem Vue.js. Do dat nastavíme výchozí hodnotu “vypnuto” a budeme chtít tuto hodnotu změnit na “zapnuto” po kliknutí na tlačítko.
Na další ukázce můžete vidět v- syntaxi. Zde využíváme v-on:click pro zavolání metody po kliknutí na tlačítko. V metodě se pouze změní data, o vykreslení dat se již postará Vue.js. Nám tak odpadá starost o vykreslování a řádky kódu, které bychom museli psát pro vykreslení.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js kurz</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ status }}
<button v-on:click="turnOn">Zapnout</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
status: 'Vypnuto'
},
methods: {
turnOn(){
this.status = 'Zapnuto';
}
}
})
</script>
</html>
V dalším díle se podíváme na trochu složitější příklad. Pokud nechcete, aby Vám další díl utekl tak mě můžete sledovat na Twitteru.
Komentáře
Zanechte komentář