A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat | |||
oktatas:web:vue:vue.js [2024/04/20 20:12] admin eltávolítva |
— (aktuális) | ||
---|---|---|---|
Sor 1: | Sor 1: | ||
- | [[oktatas:web:vue|< Vue]] | ||
- | |||
- | ====== Vue.js ====== | ||
- | |||
- | * **Szerző:** Sallai András | ||
- | * Copyright (c) Sallai András, 2021 | ||
- | * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] | ||
- | * Web: https://szit.hu | ||
- | |||
- | ===== A Vue.js ===== | ||
- | |||
- | <html> | ||
- | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> | ||
- | </html> | ||
- | |||
- | A Vue.js egy Model–view–viewmodel (MVVM) alapú JavaScript keretrendszer, amelyet | ||
- | weboldalak felületek és egyoldalas weblapok létrehozására terveztek. | ||
- | |||
- | |||
- | ===== Vue.js direktívák ===== | ||
- | |||
- | 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: | ||
- | * https://vuejs.org/v2/guide/ | ||
- | ===== A Vue.js bevezetés ===== | ||
- | |||
- | A new Vue() hívással készíthetünk új Vue objektumot. | ||
- | |||
- | |||
- | <code html> | ||
- | <div id="alkalmazs"> | ||
- | {{ uzenet }} | ||
- | </div> | ||
- | </code> | ||
- | |||
- | <code javascript> | ||
- | var alkalmazas = new Vue({ | ||
- | el: '#alkalmazas', | ||
- | data: { uzenet: 'Helló Világ!' } | ||
- | }) | ||
- | |||
- | </code> | ||
- | |||
- | |||
- | A példában egy alkalmazas objektumot hozunk létre. | ||
- | A Vue() konstruktornak paraméterként átadunk két | ||
- | tulajdonságot: | ||
- | * el - elem, amihez Vuet.js-t rendeljük | ||
- | * data - adat, amit a HTML elemhez kötünk | ||
- | |||
- | |||
- | ==== Teljes kód ==== | ||
- | |||
- | <code html index.html> | ||
- | <!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> | ||
- | </code> | ||
- | |||
- | A script elemeket a kód végére kell tenni. | ||
- | |||
- | <code javascript script.js> | ||
- | var alkalmazas = new Vue({ | ||
- | el: '#alkalmazas', | ||
- | data: { uzenet: 'Helló Világ!' } | ||
- | }) | ||
- | </code> | ||
- | |||
- | ===== Feltételes kifejezések ===== | ||
- | |||
- | <code html> | ||
- | <div id="app"> | ||
- | <p v-if="lathato">Lorem ipsum</p> | ||
- | </div> | ||
- | </code> | ||
- | |||
- | |||
- | <code javascript> | ||
- | var app = new Vue({ | ||
- | el: '#app', | ||
- | data: { | ||
- | lathato: true | ||
- | } | ||
- | }) | ||
- | </code> | ||
- | |||
- | ===== Iteráció ===== | ||
- | |||
- | <code html index.html> | ||
- | <!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> | ||
- | </code> | ||
- | |||
- | <code javascript script.js> | ||
- | var app = new Vue({ | ||
- | el: '#app', | ||
- | data: { | ||
- | dolgozok: [ | ||
- | {nev: 'Pertu Béla'}, | ||
- | {nev: 'Lapos László'}, | ||
- | {nev: 'Piros Emese'}, | ||
- | {nev: 'Tron Ferenc'}, | ||
- | ] | ||
- | } | ||
- | }) | ||
- | |||
- | </code> | ||
- | |||
- | <html> | ||
- | <div id="app"> | ||
- | <ul> | ||
- | <li v-for="dolgozo in dolgozok">{{dolgozo.nev}}</li> | ||
- | </ul> | ||
- | </div> | ||
- | <script> | ||
- | var app = new Vue({ | ||
- | el: '#app', | ||
- | data: { | ||
- | dolgozok: [ | ||
- | {nev: 'Pertu Béla'}, | ||
- | {nev: 'Lapos László'}, | ||
- | {nev: 'Piros Emese'}, | ||
- | {nev: 'Tron Ferenc'}, | ||
- | ] | ||
- | } | ||
- | }) | ||
- | |||
- | </script> | ||
- | |||
- | </html> | ||
- | |||
- | |||
- | ===== Kattintás ===== | ||
- | |||
- | |||
- | <code html index.html> | ||
- | <!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> | ||
- | </code> | ||
- | |||
- | |||
- | <code javascript script.js> | ||
- | var app = new Vue({ | ||
- | el: '#app', | ||
- | data: { | ||
- | uzenet: '' | ||
- | }, | ||
- | methods: { | ||
- | csinal: function() { | ||
- | this.uzenet = 'Működik' | ||
- | } | ||
- | } | ||
- | }) | ||
- | </code> | ||
- | |||
- | |||
- | ===== Háromszög példa ===== | ||
- | |||
- | <code html index.html> | ||
- | <!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> | ||
- | </code> | ||
- | |||
- | <code javascript script.js> | ||
- | 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 | ||
- | |||
- | } | ||
- | } | ||
- | }) | ||
- | |||
- | |||
- | </code> | ||
- | |||
- | |||
- | <html> | ||
- | |||
- | <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> | ||
- | 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 | ||
- | |||
- | } | ||
- | } | ||
- | }) | ||
- | |||
- | |||
- | </script> | ||
- | </html> | ||