< Vue

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:

<!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>
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); } } })