Phenquestions
Kehyksen tarkoituksena on tarjota sellaisia ominaisuuksia, jotka tekevät kehitysprosessista helpompaa ja nopeampaa kehittäjille. Vue.js on sellainen ominaisuuksilla rikastettu JavaScript-kehys, joka tarjoaa monia sisäänrakennettuja toimintoja ja direktiivejä, jotta kehitysprosessi voidaan tehdä nopeasti. Mutta on oltava joitain skenaarioita, kun tarvitset toimintoja, joita kehys ei ole käytettävissä, joten sinun on rakennettava oma.
Tässä viestissä opimme ja katsomme Vue: n tarjoamia sisäänrakennettuja direktiivejä.js Framework, ja opimme myös luomaan ja käyttämään omaa räätälöityä Vue-direktiiviä.
Direktiivi
Direktiivit ovat määritteitä, jotka voit linkittää DOM-elementteihin, joiden etuliite on lause "v-", joka auttaa kirjastoa tuntemaan, että se on erityinen syntaksityyppi, jota käytetään joidenkin tehtävien suorittamiseen. Direktiivejä käytetään yleensä DOM: n suoraan manipulointiin. Jotkut yleisimmin käytetyistä ja tunnetuimmista direktiiveistä ovat "v-if", "v-for" ja "v-show".
Direktiivejä käytetään vaikutusten soveltamiseen DOM-elementteihin, mutta reaktiivisesti. Ymmärretään se esimerkillä:
”V-if” -direktiivi
Voit tarkastella tekstiä.
Yllä olevassa tagissa "v-if" on direktiivi, joka poistaa tai lisää kappaleetagin "
”, Riippuu muuttujan“ showText ”totuudesta.
V-show-direktiivi
Vastaavasti meillä on "v-show" -direktiivi, joka voi suorittaa samat toiminnot kuin yllä:
Voit tarkastella tekstiä.
"V-if": n ja "v-show": n välinen ero on siinä, että "v-if" ei tee elementtiä sivua ladattaessa, jos sidottu muuttuja ei ole totta ja se latautuu, kun muuttujasta tulee totta. Sen sijaan "v-show" renderöi elementin verkkosivun latausaikana, mutta piilottaa sen. Joten "v-if" on aikatehokas sivun latausaikana ja aikaa vievä, kun muuttuja totta. Sen on hahmoteltava koko elementti, kun taas “v-show” on aikatehokas muuttujan aikaavievyyden totuudenmukaisuuteen verkkosivun latausaikana.
Hyvä on! Katsotaanpa direktiiviä, joka ottaa argumentin.
"V-sitoa" -direktiivi
Toinen yleisimmin käytetty direktiivi on “v-bind”, jota käytetään vuorovaikutuksessa ja päivitettäessä HTML-määritteitä. Esimerkiksi, jos haluamme sitoa jonkin muuttujan "href" -attribuuttiin tunnisteen, voimme sitoa "href" -attribuutin näin:
”On-on” -direktiivi
Aivan kuten "v-bind" -direktiivi, Vue tarjoaa myös "v-on" -direktiivin muuttujan sitomiseksi DOM: ssa käynnistettyjen tapahtumien kuuntelemiseksi. Esimerkiksi napsautustapahtuman kuunteleminen ja jonkin muuttujan sitominen siihen syntaksilla olisi seuraava:
Käänteisissä pilkuissa voimme antaa lausekkeen ja funktiot.
Johtopäätös
Olemme oppineet Vue-direktiiveistä ja nähneet kuinka Vue-direktiivejä käytetään.js. Olemme keskustelleet eräistä Vuen yleisimmin käytetyistä ja perusrakenteista.js, mikä auttaa paljon ja säästää valtavasti aikaa kehityksessä.
