Vue.js Komponentit

Vue.js on progressiivinen javascript-kehys, jota käytetään käyttöliittymien (käyttöliittymät) ja SPA: n (yksisivusovellukset) rakentamiseen. Voimme alkaa rakentaa verkkosovelluksia Vueen.js, joilla on perustiedot HTML: stä, CSS: stä ja Javascriptista. Vue.js on rakennettu yhdistämällä jo olemassa olevien kulma- ja reaktiokehysten parhaat ominaisuudet. Kehittäjät rakastavat koodata ja tuntevat vapauden ja mukavuuden rakentaessaan sovelluksia Vueen.js.

Tämä komponenttipohjainen lähestymistapa on pohjimmiltaan saanut reactJS: n ja poimittu siitä. Kirjoitamme koodin komponenttien muodossa, jotta voimme tuoda kyseisen komponentin ja käyttää sitä uudelleen missä tahansa. Vue.js tarjoaa yhden tiedoston komponentin, mikä tekee siitä löyhästi yhdistetyn ja uudelleenkäytettävän koodin.

Vue.js tarjoaa parhaan komponenttipohjaisen lähestymistavan, kuten mitä kehittäjä tarvitsee; hän voi löytää sen yhdestä .vue-tiedosto. Kehittäjät tuntevat olonsa niin mukavaksi ja mukavaksi, kun heidän ei tarvitse huolehtia komponentin ylimääräisestä rakenteesta tai huolehtia siitä.

Tässä artikkelissa tarkastellaan yhden tiedoston komponenttia, jolla on .vue-laajennus. Joten katsotaanpa hyvin yksinkertainen Vue-komponenttiesimerkki ja ymmärretään se.

Tämä on hyvin yksinkertainen ja yksinkertainen esimerkki Vue-komponentista. Missä voimme nähdä, että koodi on jaettu kolmeen kerrokseen. Tämä kolmikerroksinen syntaksia on paras osa Vue.js. Se tyydyttää huolen erottamisen, mutta on kuitenkin yhdessä .vue-tiedosto. Meillä on mallimme (HTML), logiikka Javascriptissa ja muotoilu komponentin sisällä.

• Sapluuna
• Skripti
• Tyyli

Sapluuna

Tähän mallimerkkiin kirjoitamme HTML-koodimme. Voimme sitoa muuttujia tässä myös Vue: lla.js dataa sitova syntaksi, ja voimme lisätä tähän joitain muita toimintoja myös Vue: n avulla.js tarjosi syntaksin vastaaville toiminnoille.

Skripti

Tämä on osa, johon voimme kirjoittaa komponentin logiikan javascriptiin seuraamalla Vue-syntaksia.js. Kaikki komponentin toiminnot ja logiikka menevät tähän. Esimerkiksi,

• Muiden tarvittavien komponenttien ja pakettien tuominen.
• Muuttuva ilmoitus
• Menetelmät / toiminnot
• Elinkaarikoukut
• Lasketut ominaisuudet ja tarkkailijat
• Ja niin edelleen…

Tyyli

Tässä kirjoitamme komponentin tyylin CSS: ään tai voimme käyttää mitä tahansa esiprosessoria, jota haluamme käyttää.

Tämä on vain vilkaisu Vuen komponenttiin.js. Katsotaanpa hieman komponenttien välistä käyttöä, organisaatiota ja tiedonsiirtoa.

Tuo ja käytä komponentteja

Komponentin käyttämiseksi meidän on ensin tuotava komponentti. Muussa tapauksessa miten Vue voi.Hän tietää siitä? Voimme yksinkertaisesti tuoda komponentin lisäämällä "Import" -käskyn komentotunnisteen alkuun ja julistamalla kyseisen komponentin "components" -objektiin seuraavan syntaksin avulla.

Kun komponentti on tuotu onnistuneesti, voimme käyttää sitä tällaisessa mallissa