Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:vue:gyors_kezdes

< Vue

Vue gyors kezdés

  • Szerző: Sallai András
  • Copyright © Sallai András, 2016
  • Licenc: GNU Free Documentation License 1.3

Helló Világ

<div id="app">
{{uzenet}}
</div>
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);
      }
  }	
})
oktatas/web/vue/gyors_kezdes.txt · Utolsó módosítás: 2019/08/22 20:32 szerkesztette: admin