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

Programiranje
21

Dao bi ti isti code koji ti je dao @CC , samo što bi ja unutar metode stavio generalno ajax poziv. Hoće li to biti jQuery.ajax ili tko će već biti provider ajax metode, što se mene tiče…nebitno je.

Nisam ni sam zapravo bio siguran da li je vue to nekako specijalno rješio sa svojim ajax-om, pa da je bitno da se ide baš tim putem.

Iz priloženog ne vidim da se nešto posebno dešava što nebi bilo zamjenjivo drugim ajax providerom.

Btw. sada ću opet ja odgovarati ono što me se nije pitalo i gurati fokus opet na normJS. :smiley: …ali to je iz razloga što mislim da ovakve svakodnevne situacije su dobre da se uvidi uloga normJS-a.

Primjeti da “ajax” ima svoju jasnu ulogu i da je sasvim nebitno hoće li tu ulogu odraditi vue, jQuery, nativni javascript code …ili netko treći.
Ako standariziramo kakvim inputom se hrani ajax metoda i kakvi output imamo (callback u ovom slučaju) …onda je tebi nebitno jel ajax rješen od strane vue-a, jQuery-a ili koga već.

U slučaju normJS-a, znao bi da normJS ima ajax metodu, i znao bi kako se poziva, kako se radi sa callbackom…i boli te ona stvar jel ispod haube jQuery-i ili vue…ili tko već.

Prednost je ta što će postojati samo jedna implementacija ajax-a na stranici …jer nepotrebno je da više različitih providera (vue, jQury …) …rješava isti problem.

Druga prednost je što se onda dešava sav promet ajax-a preko iste komponente. Pa se lakše ugrađuju neki globalni eventi na ajax response …recimo, želiš logirati svaki ajax response koji se desio i raditi nešto sa njime…recimo u development modu želiš imati mogućnost da scope-aš taj cijeli log u bilo kojem momentu…

Dalje, druge komponente, koje nemaju pojma o tebi i tvojim principima programiranja, mogu se “na slijepo” kačiti na ajax response i odrađivati svoju svrhu, radi čega si ih ti svojevoljno uključio/instalirao u cjelinu…

Sorkač ako ti dodijavam, mogeće tebe i ne zanima …možda netko drugi još uvijek želi skužiti normJS, pa ubacujem pomalo na žive primjere :slight_smile:

Da ti se nebi slučajno dalje zaspamala tema sa normJS-om, ako tko poželi priupitati, ovdje je normJS tema:

22

Malo sam procitao taj tvoj normJS i kako meni to izgleda i zvuci to nine nista novo niti revolucionarno to je jednostavno novi JS framework i nista vise i nista manje. U.jesto da se zajebavas s time uhvati se lijepo nekog od popularnih postojecih frameworka i nauci njega na kraju ces vidjeti da svaki ima rijeseno to sto ti zelis rijesiti sa normJS-om. Toliko o normJS, a sad u vezi tvog odgovora na temu. Axios je jednostavno HTTP client i to je to. VueJS sam po sebi nema nikakve veze sa ajaxom jer je on tu za nesto drugo, a ne da se bavi time kako izvrsiti ajax.

23

Dajte mi još nekaj objasnite (vezano uz JS), jer mi nije jasno u zbunjujuće mi je (pa da pitam umjesto da gubim vrijeme sam istraživajući, a vi već imate iskustva):

  1. vanilla se koristi uz vue ili je to sasvim druga priča od vue.js?
  2. shvatio sam da su angular, react i vue različite stvari koje rade slične stvari (sa svojim prednostima i manama i specifičnima za primjenu), čemu onda vanilla?

Ovo za vue i axion shvatih (moram includad axion lib da bih imao podršku i za ajax call).
Hvala!

24

Vanilla === cisti javascript, bez jquery-a. Tj. ako hoces nac element onda koristis findElementById, a ne $.select(“id”) (ili kak vec ide)…
Za ajax koristis fetch ili XHRequest ( i pises ih sam), a ne jquery ajax.
Itd…

1 Like
25

Dakle, generalno gledajući, mogao bih izbaciti jQuery i koristiti vanillu?
A ako neću vanillu, nego vue, onda me za vanillu boli kifla i ne moram se uopće zamarat s njom? :slight_smile:

26

Pa recimo. Vue ce ti rjesit dio problema, ali za ostalo ce ti trebat obican JS.

Kuzis u cem je stvar. JQuery je rjesavao vrlo specifican problem, a to je da je davao jedinstvani framework za sve browsere, u vrijeme kad su se browseri jako razlikovali (ie6, ie8,…). Sad kad su svi browseri vise manje standardizirani i implementiraju vise manje iste stvari u isto vrijeme, jquery vise nema nekog smisla. Znaci sve e stvari koje su ljudi prije rijesavali sa jquery-em sada se mogu rjesavati sa obicnim js-om.
Ovi novi frameworci su nastali na racunici da je snaga tvog kompjutera dovoljno jaka da se sad cjela aplikacija moze vrtiti u tvom browseru. Samim time ti frameworci ti omogucavaju da se lakse boris sa svim tim komponentama i kontrolama istih.

Iako mozes koristit angular i vue za quick and dirty posao, moras izvagati da li se isplati ufurati novi library na stranicu samo da bi rjesio par sitnica koje mozes i sa cistim ( vanilla) javascriptom.

2 Likeova
27

Otprilike, makar je vaniliju dobro znati jer ces lakse snaci u drugim frameworcima, bibkiotekama i tome slicno.

Dedinitivno preporucam da si pogledas stranicu EcmaScript jer tamo je sve napisano, makar preleti.

1 Like
28

Kužim taj dio da će mi trebati za sitne funkcije, samo sam htio znati jesu li odvojeni (potpuno, poput primjerice php smtp library-a i smtp mail funkcije) ili je jedan ovisan o drugome (poput primjerice php-a i laravela).
Znači generalno gledajući trebao bih includad vanillu, vue i axios za malo napredniji web.

29

Bacit ću oko. Hvala na savjetu

30

Vaniliju ne ikludas, kako je mozes includat, jedino ako mislis na script tags unutar HTML a pa da tamo pises JS kod. Ali i to generalo se danas ne radi nego radis modularno pa onda sa webpack ili tako necim generiras jedan js file kojeg inkludiras u html, a ostalo su sve moduli i klase u JavaScriptu koji je po svojoj prilici zargonski mazvan vanilla.

1 Like
31

Uglavnom, na tvoje početno pitanje.
Primjeti da kada kreiraš vue instancu, onda su svi propertisi sa dolarom, svojstva koja vue instanca ima defaultno nakon što ju kreiraš:

vue.$el;  //element nad kojim se vue "naselio"
vue.$ovo;
vue.$ono;
...

Podaci koje ti zakačiš na vue, će postojati direktno (bez dolara) kao property vue instance, npr:

vue.todos … je todos lista koju je @CC prosljedio u vue kod generiranja instance.

Čarolija je u tome kada napraviš vue.todos.push(new_todo_item), da će se taj novi item prikazati u view-u identičanom logikom kojom si prikazivao ostale iteme iz todos liste.

A sada, kako ćeš ti modificirati vue.todos listu, hoćeš li dohvaćati nove iteme ajaxom ili ćeš random ubacivati iteme kada korisnik klikne neki gumb …to je skroz proizvoljno na tebi. Glavno je da si postigao jednu finu separaciju između djela gdje održavaš podatke …i djela koji se brine za prikaz tih podataka. A view će automatski onda pratiti izmjenu podataka.

Ako se to slučajno ne desi automatski, pošto postoje neke kerefeke kada vue ne može uočiti da se neki vue.podatak izmjenio, onda nakon promjene takvih podataka pozoveš vue.$forceUpdate() kako bi forsirao da vue uoči novo stanje sa podacima i updatea view.

To je onako površno o vue-u, ali rekao bih i njegova bit.

1 Like
32

VueJS, kao i ostali FW su tu primarno kako bi olaksali neke stvari, i dali odredjenu strukturu.

VueJS ima nesto sto se zove state, to su ti oni properties koji se nalaza u data objektu.Samim tim sve izmjene u templetu bi se trebale vrsiti kroz promjenu stanja state-a.To ukratko znaci da na neka direktna caprkanja po DOM-u mozes slobodno zaboraviti :slight_smile:

Jedna super stvar VueJS-a su komponente.Mozes kreirati komponentu za bilo sta i samim tim izlomiti kod na manje dijelove.S tim dobijas potencijalan reusability, laksi debugging i lakse testiranje.

Ovo sto je Bozo rekao za forceUpdate zaboravi, to ti je jedna vrsta anti-patterna (hint: Vue.set()) :wink:

1 Like
33

Na to sam mislio.
Poigrat ću se malo s njom pa će mi sjest bolje.
Ne trebam znat sve, samo da pohvatam logiku cijele te JS zbrke…

34

Doktor, veterinar… :stuck_out_tongue:

35

U pravu si. Vidio sam i sam negdje hint da kada zatreba vue.$forceUpdate da nešto nije najbolje napravljeno sa updejtom podataka.

Ne zamaram se s time…dok vue.$forceUpdate() radi :stuck_out_tongue:

A nisam još ušao u vue duboko koliko planiram, mada već ovo površno što ga koristim, odlično pomaže.

36

dr. veterine? :stuck_out_tongue:

37

Izvuk’o si se u foto finišu. :stuck_out_tongue:

1 Like
38

Nego, jes’ ti vidio to. Samo što smo se zaželili @CC-a, eto njega :smiley: :smiley:

1 Like
39

@creatifcode
Jes’ kad implementir’o DRY koncept?

40

Mozes li malo vise pojasniti pitanje, nisam siguran da sam ga u potpu osti razumio.

DRY koncept sam po sebi zvuci cool i super izgleda u teoriji, a kao sto znamo teorija i praksa se razlikuju gotovo pa uvijek.