Share
În postul introductiv pentru această serie am vorbit puțin despre modul în care designerii web pot beneficia prin utilizarea Vue. În acest tutorial vom învăța cum să obțineți Vue și să rulați, în timp ce răspundeți la unele întrebări inițiale pe care le puteți avea.
Vue este doar JavaScript, ceea ce înseamnă că îl puteți încărca prin includerea unei etichete de script în documentul dvs. HTML. Site-ul Vue recomandă utilizarea unui CDN asemănător https://cdn.jsdelivr.net/npm/vue pentru a fi sigur de a obține cea mai recentă versiune. De asemenea, puteți utiliza alte linkuri specifice versiunii, cum ar fi https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.
Notă: Dacă creați o aplicație de producție, este recomandat să utilizați un controler de pachete asemănător fire pentru a gestiona toate dependențele dvs. și pentru a vă deplasa în locații care utilizează CDN. Acest lucru este deosebit de important dacă doriți să construiți Vue în pachetul dvs. JavaScript, de exemplu folosind ceva de genul Webpack.
Când creați o instanță Vue, puteți utiliza el în obiectul de configurare pentru a conecta instanța dvs. la DOM. el opțiunea ar trebui să fie un element sau un șir de selecție CSS. Acest element poate conține, de asemenea, un cod de șablon. Deci, în HTML-ul paginii dvs., puteți avea ceva de genul:
titlu
conţinut
Și apoi în JavaScript, ați avea ceva de genul:
var app = new Vue (el: "#app", data: title: "Nivelul de amenințare la miezul nopții", conținut: "AGENT MICHAEL SCARN, robust chipeș fără să încerce să se relaxeze la birou, Armele lui se află lângă insigna FBI, care strălucește în lumina fluorescentă a biroului, îmbrăcat într-un costum, și-a slăbit cravată și a desființat unele butoane, dezvăluind pieptul lui păros.
Din nou, rețineți că "#App" string se referă la div în HTML. Vue va înlocui conținutul interior al divului cu rezultatul fazei de redare Vue.
Am stabilit că Vue ne permite să separăm viziunea noastră de datele noastre. Unele logici pot fi realizate în vizualizarea însăși, însă putem evita următoarele modele care duc la un cod prost sau la o stare incorectă:
Deci, cum funcționează acest lucru?
Vue vă permite să setați informații în date opțiune. Orice pereche cheie-valoare care trece în interiorul acestui obiect va fi observată pentru modificări și orice va depinde de acea bucată de date re-prestate când datele se schimbă.
Ceea ce inseamna in esenta este ca date obiect este reactiv. Dacă utilizați metodele de manipulare a datelor încorporate în JavaScript, modificarea va declanșa motorul de randare al lui Vue pentru a face magia.
De exemplu, dacă obiectul de date este configurat astfel:
var vm = Vue nou (el: "#app", date: items: []);
Cu acest cod de șablon:
Item.text
Mai târziu adăugați câteva elemente, cum ar fi:
vm.items = [text: "Ziua diversității", text: "Beach Trip"]
Șablonul va re-reda automat, iterând articolele care sunt setate.
Ca caracteristica JavaScript care permite Vue să vizioneze date obiect (obiect getters și setters) nu furnizează informații atunci când se adaugă chei noi sau se elimină cheile existente, adăugarea și eliminarea cheilor nu declanșează nicio re-redare. Deci, în același exemplu de mai sus, dacă obiectul de date inițial este gol (articole: [] nu este prezent):
var vm = Vue nou (el: "#app", date: )
Orice schimbare la vm.items nu va declanșa o reînnoire. Din documentația Vue:
"Vue nu permite adăugarea dinamică a unor noi proprietăți reactive de nivel rădăcină la o instanță deja creată."
În plus, este important să rețineți că atunci când adăugați elemente într-un matrice utilizând sintaxa array [index] = 'valoare nouă', re-redarea nu va fi declanșată. În schimb, ar trebui să utilizați splice sau Vue Vue.set , care depășește domeniul de aplicare al acestui articol. Vedeți lista cu avertismente din documentația Vue.
Vue nu contrazice jQuery, Underscore sau orice altă bibliotecă populară de utilități JavaScript. Cu toate acestea, ar trebui să vă gândiți de două ori la încercarea de a utiliza Vue alături de un alt JavaScript cadru cum ar fi React.
Probabil că nu e neapărat nevoie jQuery în plus față de Vue, dar este posibil să doriți să îl utilizați și în alte domenii ale aplicației care nu sunt redate de Vue.
Vue oferă, de asemenea, "cârlige" pentru a se integra cu alte biblioteci, de exemplu, pentru a realiza animații.
Vue nu cere lui Babel să fii productiv cu el. Cu toate acestea, Babel vă va permite să utilizați câteva dintre caracteristicile spec. De forefront ale JavaScript, cum ar fi șirul de șabloane și tehnicile de manipulare mai complexe.
Vue nu necesită sisteme speciale de construire, ceea ce îl face foarte accesibil pentru dezvoltatorii orientați spre design, care sunt obișnuiți să scrie cantități mici de JavaScript, în timp ce sunt încă suficient de puternici pentru a fi integrați în sisteme complexe de construcție și aplicații complete de o singură pagină.
Nu numai că aveți mai multe instanțe Vue pe aceeași pagină, dar puteți chiar să faceți referire la același obiect de date de bază pe aceeași pagină. De exemplu, în exemplul din lista precedentă de date, dacă JavaScript-ul nostru a arătat astfel:
var partajatObject = elemente: [] vm = Vue nou (el: "#app", data: sharedObject) vm.items = [text: ]
Rezultatul utilizării acestui șablon ar fi același cu exemplul nostru precedent:
Item.text
Cu toate acestea, putem adăuga și oa doua instanță a Vue care face trimitere la aceeași reprezentare a datelor subiacente:
var vm2 = Vue nou (el: "# app2", date: sharedObject)
Apoi, putem arăta, de exemplu, numărarea articolelor din listă:
Items.length
Desigur, acest lucru nu poate fi comportamentul dorit. Este posibil să doriți să creați două componente care nu sunt legate de același obiect de bază și care vor funcționa fără probleme.
Dacă doriți să creați două instanțe separate start cu același obiect de bază, puteți utiliza Object.assign pentru a crea copii noi ale aceluiași obiect.
permiteți vm2 = Vue nou (el: "# app2", date: Object.assign (, sharedObject))
Vue este o alegere excelentă pentru dezvoltatorii care doresc un cadru ușor, ușor de adoptat, dar anticipează necesitatea unui cadru mai robust în viitor. Vue va scala cu nevoile tale. Înțelegerea modului în care se utilizează Vue în diferite scenarii (și având o idee despre ceea ce se întâmplă sub suprafață) vă va oferi un set de instrumente foarte puternic pe care îl puteți produce odată din prima zi.
În următorul tutorial vom acoperi mai mult din valoarea unică pe care o oferă Vue, uitandu-ne la câteva exemple de cod curat al Vue. Ne vedem acolo!
Aflați Vue.js cu ghidul nostru complet Vue.js, indiferent dacă sunteți un coder experimentat sau un web designer care caută să ridice noi tehnici de dezvoltare front-end.
Accentsconagua