Ez a dokumentum egy előző változata!

Tartalomjegyzék

Vue.js

Vue.js

Szerző: Sallai András
Copyright © Sallai András, 2021
CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

A Vue.js

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.

<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:

el - elem, amihez Vuet.js-t rendeljük
data - adat, amit a HTML elemhez kötünk

Teljes kód

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>

A script elemeket a kód végére kell tenni.

script.js

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

Feltételes kifejezések

<div id="app">
    <p v-if="lathato">Lorem ipsum</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        lathato: true
    }
})

Iteráció

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>

script.js

var app = new Vue({
    el: '#app',
    data: {
        dolgozok: [
            {nev: 'Pertu Béla'},
            {nev: 'Lapos László'},
            {nev: 'Piros Emese'},
            {nev: 'Tron Ferenc'},
        ]
    }
})

{{dolgozo.nev}}

Kattintás

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>

script.js

var app = new Vue({
    el: '#app',
    data: {
        uzenet: ''
    },
    methods: {
        csinal: function() {
            this.uzenet = 'Működik'
        }
    }
})

Háromszög példa

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>

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

Alap
Magasság

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék

Vue.js

A Vue.js

Vue.js direktívák

A Vue.js bevezetés

Teljes kód

Feltételes kifejezések

Iteráció

Kattintás

Háromszög példa

Eszközök az oldalon