Primjer u vue.js za poziv i prikaz rezultata iz php skripte

Programiranje
1

Molio bih jedan primjer jednostavne primjene vue.js-a
Dakle, ajmo reć da u htmlu imamo element id rezultat (nek se html zove index.html)

Gumb

Klikom button #gumb trebala bi se pozivati rezultati.php skripta koja vraća json objekt sa ključ/vrijednost:

JSON nekikljuc:nekavrijednost

Te nakon poziva te skripte da se u divu #rezultat prikaže vrijednost dobivena iz spomenutog JSON objekta.
Molim za jednostavan primjer, učim :slightly_smiling_face:
Hvala!

2

Ako nisi, baci pogled na dokumentaciju. Baš je lijepo prikazano o čemu se radi kroz jednostavne primjere.

Fora je kada složiš logiku između podataka i view-a, onda samo rotiraš podatke…editiraš, dodaješ…što već. A prikaz automatski slijedi vrijednost podataka…

1 Like
3

Da, gledao sam to

Zanima me kratki, jasni primjer (kojeg inače radim s jQuery/AJAX, a za kojeg čitam posvuda da je “zastario”, pa me zanima kako to sa vue izgleda), dajte tih par linijica (ne treba php file, samo vue.js)

4

Ako me nitko ne preduhitri…kad budem za kompom :wink:

1 Like
5

Hvala! (+ Dvadesetznakova)

6

Fora je u tome da razliku izmedju JQuery-a i ovih novih library-a nemozes skuzit na kratkom primjeru. Kod kratkog primjera i JQuery moze posluziti, fora je kaj ovi library-i mogu napraviti enormne web aplikacije bez da se programer izgubi u spageti kodu.

7

Nije mi bitno koliko je code dug (samo da je napravljen u skladu sa best practices vue.js norme), već da vidim kako se to implementira koristeći vue.js (da ne miješam jQuery, ajax i vue u istoj funkciji)

8

Pa kad imas vue na stranci, onda nemas JQuery. Ajax je ajax ako bas nemas nekakav punokrvni rest api, ali bi ti trebao vratit json.
Neznam zakaj ali imam filing da imas potpuno krivi dozivljaj tih library-a, da mislis da je to nesto kao jquery, stvar koju povuces s cdn-a i onda koristis pozive poput jquery-a po potrebi. To bas tak ne funkcionira. Mislim, ja samo imam osjecaj da ti tak mislis :slight_smile: .
Vue je library koji je namjenjen izradi web aplikacija, a ne da zamjeni jquery. A best practice ces nac na njihovoj stranici.
Mozes se poigrat tako da nadjes nekakav boilerpalte i pokrenes :


9

Istina, vjerojatno imam pogrešan pogled na vue (ne sramim se to reći, nov sam u njemu), i zato me baš i zanima kako to izvesti - povući podatke iz .php skripte (recimo da je ta skripta zadužena za query i da vraća json čiji sadržaj se treba prikazati u poljima koja “kontrolira” vue).

10

Ne radim bas sa Vue-om, ali koliko vidim moras napravit nekakav Vue app i onda unutar njega radis deklariras element koji zelis kontrolirat i nekakvu datu. Tako da mozes i povuc vue sa cdn-a i napisat par scriptica za kontrolu elemenata.
Dohvacanje podataka radis sa vanilla JS-om ili nadjes nekakvu fetchalicu tipa ovog:


To ja koristim u reactu ( ima jos jedan package kaj to spaja sa reduxom). Ovaj ti vraca promise sa gotovim podatcima.
A ostalo ces se morati malo poigrati.

Samo si izbij iz glave jquery i njegove principe i nacin rada. Jquery je zastario jer je vanilla javascripta dovoljno sazrjela da ti jquery vise ne treba. Tako da ajax pozive mozes raditi sa fetchom ( ili XHR-om), dohvacat elemente isto, itd…

11

Znači, koristim vanillu i vue?
A jQuery je sve tako lijepo i logično radio…
Kaj sad, mora se kaj se mora.

12

Nakon sto shvatis sta Vue i slicni alati nude, neces vise nikad pomisliti da radis sa jQuery-om :slight_smile:

Ako imas kakvih pitanja oko Vue-a, slobodno pisi u PM ili ovdje.

1 Like
13

To si već negdje izjavio (kolko se sjećam) i od tada mi se mota po glavi, i rekoh si - ajd da vidimo i da meni uleti takav osjećaj :slight_smile:
Međutim mene i dalje zanima kako bi to sa vue napravio ispravno?
Koristeći vanillu? Axios? Neku native metodu? Daj mi primjer u par linija kako bi to bilo najbolje napraviti. (zanima me)

14

Evo napisem ti ja za par minuta cim se vratim s pusenja.

1 Like
15

I ja na pljugi vani :smiley:

16 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>

<div id="app">
    {{ todos.lenght }}
    <ul :if="todos && todos.lenght">
        <li v-for="todo in todos">
            <p>{{todo.title}}</p>
        </li>
    </ul>
    <button @click="getTodos">Get Todos</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            todos: [],
            errors: ''
        },
        methods: {
            getTodos: function () {
                axios
                    .get('http://jsonplaceholder.typicode.com/todos')
                    .then(response => this.todos = response.data)
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    });

</script>
</body>

</html>
2 Likeova
17

Eto ti jedan jednostavan primjer, nadam se da ti je to ok, ali s obzirom davidim da pocinjes s laravelom, a i s VueJSom, nema ti boljeg lika od Jeffrey Way koji ce ti sve to objasniti. Pogledaj Laracasts i sve ce ti biti jasno, da vidis kako frajer objasnjava imas i besplatan VueJS 2 tutorial.

1 Like
18

E to te pitam! :blush:
Hvala! Dakle, slično jQuery-u (fetch data), a ovo ostaloje tipično za vue. Taj dio me zanimao.

19

Učim i vježbam koliko stignem uz posao (treba održavat stare projekte i dovršavat započete).
Paralelno radim aplikaciju u Laravelu (i Vue) koja se veže na postojeći web (odnosno na postojeću bazu tog weba), pa na njoj ujedno i vježbam.

20

No problemo, ali moja iskrena preporuka za Laracasts, tamo sam maltene inventar.

1 Like