Ez a dokumentum egy előző változata!
A Vue.js egy Model–view–viewmodel (MVVM) alapú JavaScript keretrendszer, amelyet weboldalak felületek és egyoldalas weblapok létrehozására terveztek.
A Vue.js dupla kapcsos-zárójeleket használ adatok helyének meghatározására.
A HTML attribútumként megadott direktívák a v- karakterekkel kezdődnek.
Kézikönyv:
A new Vue() hívással készíthetünk új Vue objektumot.
<div id="alkalmazs"> {{ uzenet }} </div>
var alkalmazas = new Vue({ el: '#alkalmazas', data: { uzenet: 'Helló Világ!' } })
A példában egy alkalmazas objektumot hozunk létre. A Vue() konstruktornak paraméterként átadunk két tulajdonságot:
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> </head> <body> <div id="app"> {{uzenet}} </div> <script src="script.js"></script> </body> </html>
A script elemeket a kód végére kell tenni.
var alkalmazas = new Vue({ el: '#alkalmazas', data: { uzenet: 'Helló Világ!' } })
<div id="app"> <p v-if="lathato">Lorem ipsum</p> </div>
var app = new Vue({ el: '#app', data: { lathato: true } })
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for="dolgozo in dolgozok">{{dolgozo.nev}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script src="script.js"></script> </body> </html>
var app = new Vue({ el: '#app', data: { dolgozok: [ {nev: 'Pertu Béla'}, {nev: 'Lapos László'}, {nev: 'Piros Emese'}, {nev: 'Tron Ferenc'}, ] } })
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button v-on:click="csinal">Mehet</button> <p>{{uzenet}}</p> </div> <script src="http://vuejs.org/js/vue.js"></script> <script src="script.js"></script> </body> </html>
var app = new Vue({ el: '#app', data: { uzenet: '' }, methods: { csinal: function() { this.uzenet = 'Működik' } } })
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="haromszog"> <label>Alap</label> <input v-model="alap"><br> <label>Magasság</label> <input v-model="magassag"><br> <button v-on:click="szamit">Számít</button><br> <input v-model="terulet" v-if="terulet_lathato" disabled> </div> <script src="http://vuejs.org/js/vue.js"></script> <script src="script.js"></script> </body> </html>
new Vue({ el: '#haromszog', data: { alap: '', magassag: '', terulet: '', terulet_lathato: false }, methods: { szamit: function() { var alap = this.alap var magassag = this.magassag var terulet = alap*magassag/2 this.terulet = 'Terület: ' + terulet this.terulet_lathato = true } } })