Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:vue:vue.js [2021/04/16 23:16] – [Teljes kód] admin
+++ oktatas:web:vue:vue.js [2024/04/20 20:12] (aktuális) – eltávolítva admin
@@ 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>