de Igor Petrov

Cum se înlocuiește jQuery cu Vue.js în aplicațiile Ruby on Rails

Cum se inlocuieste jQuery cu Vuejs in aplicatiile Ruby on

Dacă ești un Ruby on Rails dezvoltator și sunteți de câțiva ani, probabil că sunteți obișnuiți să utilizați jQuery ca opțiune implicită pentru dezvoltarea front-end-ului. Cu câteva versiuni în urmă, nucleu Șine dezvoltatorii l-au oferit ca standard și, în timp, a devenit standard. jQuery a fost numărul 1 JavaScript bibliotecă și a fost foarte convenabil să o folosiți.

De atunci, a trecut destul de mult timp, dar jQuery este încă opțiunea implicită. Acum, totuși, aveți nevoie de ceva diferit din cauza complexității crescânde a codului de pe partea clientului. S-ar putea să încercați React, Angular.js sau Vue.js, dar puteți utiliza unul dintre acestea cu ușurință în timp ce faceți cel mai mic efort pentru a-l integra într-o aplicație existentă sau nouă.

obisnuiam jQuery pentru o lungă perioadă de timp și a devenit un obicei: dacă începeți un nou Șine aplicație, jQuery este deja acolo. Sunteți deja familiarizați cu el și astfel începeți să-l utilizați imediat.

Acum câțiva ani, am descoperit că îmi place Unghiular 1, pentru că a fost foarte simplu pentru început. Dar avea încă o configurare redundantă cu inițializarea aplicației, scrierea controlerelor și injectarea dependențelor.

Acest lucru este minunat pentru arhitectura aplicației dvs. cu o abordare MVC (MVVM).

Dar să presupunem că aveți o aplicație existentă cu multe jQuery Cod de manipulare DOM și doriți să începeți să înlocuiți această mizerie cu ceva mai acceptabil. Ceva ca următorul (care ar putea fi optimizat, desigur – dar acest lucru este de dragul exemplului):

$(document).ready(function(){
   ...   $('#some-radio-button1').on('click', function(){     if ($(this).is(':checked')) {       // removing "active" classes, hiding some blocks       // showing related block
     } else {
       // opposite of above     }   });
});

De ce Vue.js?

Deci, de ce recomand înlocuirea jQuery cod cu Vue.js? pentru că Vue.js nu este util doar pentru scrierea complexă JavaScript aplicații. De asemenea, îl puteți utiliza doar pentru o sarcină simplă, cum ar fi manipularea DOM. Dacă este tot ceea ce aveți nevoie, ar fi o idee bună să mergeți Vue. Și puteți merge mai departe cu el dacă aveți nevoie pentru a rezolva sarcini mai complexe, cum ar fi rutare, gestionarea stării și așa mai departe.

Deci, dacă aveți deja un proiect cu multe jQuery cod și ați dori să scăpați de acei manipulatori de evenimente dezordonate, cu siguranță ar trebui să dați Vue.js o incercare.

Noțiuni de bază

Dacă sunteți un dezvoltator RoR vechi și încă gestionați activele prin Pinioane, apoi descărcați și puneți vue.js pentru dumneavoastră vendor/assets/javascripts pliant.

Apoi, solicitați-l de la principalul dvs. JavaScript fișier manifest (de exemplu, application.js ):

//= require jquery//= require jquery_ujs//= require bootstrap//= require vue

Apoi, trebuie să instanțiați un Vue și atașați-l la un element din HTML cod. În acest scop, ați putea crea un separat vue_app.js (sau .coffee) fișier din interior app/assets/javascripts:

window.vueApp = new Vue  el: '.off-canvas-container'  data:    ...

Gata, acum puteți folosi Vue.js!

Mergând mai departe

Acum puteți adăuga date la Vue instanță data secțiunea și scrieți câteva handler în methods secțiune. Dar este mai bine să folosiți un nucleu Vue.js unitate: componente.

Cel mai simplu mod de a continua Vue.js este să vă folosiți existentul Șine vizualizează și înfășoară câteva bucăți de HTML în componente. Să aruncăm o privire cum să realizăm acest lucru.

De exemplu, am app/views/sellers/print_labels/new.html.erb si ceva jQuery cod asociat acestei pagini:

Cum se inlocuieste jQuery cu Vuejs in aplicatiile Ruby on
1611298146 788 Cum se inlocuieste jQuery cu Vuejs in aplicatiile Ruby on

Acesta este un formular de adresă de expediere cu intrările dezactivate în mod implicit. Odată ce utilizatorul face clic pe pictograma „creion”, câmpurile formularului se vor transforma în intrări accesibile și se va afișa butonul „Salvare”. După ce se face clic pe „Salvare”, formularul revine la starea inițială.

Pentru a înlocui acest lucru jQuery cod cu un simplu Vue.js componente, le creez app/assets/javascripts/components/print_labels.coffee cu ceva de genul următor (dar nu uitați să solicitați components dosar din application.js):

Vue.component 'print-labels',  data: ->    isEditingAddress: false

Și apoi îl folosesc în al meu Șine vedere:

1611298146 501 Cum se inlocuieste jQuery cu Vuejs in aplicatiile Ruby on

Mai multe lucruri de observat:

  • Dacă doriți să păstrați șablonul de componentă în vizualizările Rails sau parțiale, ar trebui să utilizați inline-template opțiune.
  • v-cloak este necesară opțiunea pentru a afișa componenta după ce a fost inițializată și redată
  • Folosim @click pentru atașare onclick gestionare de evenimente (puteți extrage codul complex al componentei methods)

Acum putem scăpa de jQuery pentru că l-am înlocuit cu un mic Vue.js componentă (cu o singură variabilă de date!).

Acum e rândul tău! Continuați cu această abordare și sper că vă veți bucura Vue.js curând.

Dacă ți-a plăcut această postare, te rog să dai clic pe să răspândească vestea.