Vue gyors kezdés

Szerző: Sallai András
Copyright © Sallai András, 2016, 2021
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

Helló Világ

<div id="app">
{{uzenet}}
</div>

new Vue({
    el: '#app',
    data: {
  	uzenet: 'Helló Világ!'
    }
})

Teljes kód:

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 
    <div id="app">
    {{uzenet}}
    </div>
 
    <script src="http://vuejs.org/js/vue.js"></script>
    <script src="script.js"></script>
 
</body>
</html>

script.js

new Vue({
    el: '#app',
    data: {
        uzenet: 'Helló Világ!'
    }
})

Ketteskötés

<div id="app">
<p>{{uzenet}}</p>
<input v-model="uzenet">
</div>

new Vue({
    el: '#app',
    data: {
        uzenet: 'Helló Világ!'
    }
})

Lista készítése

<div id="app">
    <ul>
        <li v-for="gyumolcs in gyumolcsok">
	  {{gyumolcs.nev}}
	</li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        gyumolcsok: [
	    {nev: 'körte'},
	    {nev: 'szilva'},
	    {nev: 'alma'},
	    {nev: 'barack'}
	]
    }
})

Eseménykezelés

<div id="app">
	Oldal: <input v-model="oldal"><br>
	<button v-on:click="szamol">Számít</button>
</div>

new Vue({
  el: '#app',
  methods: {
      szamol: function() {
	  alert(this.oldal * 4);
      }
  }	
})