Vue.js Šablono įvadas

Vue.„js“, kuris naudojamas kuriant vartotojo sąsajas (UI) ir vieno puslapio programas (SPA), sujungia daugelį geriausių „JavaScript“ rėmų „Angular and React“ savybių ir daugelis kūrėjų mėgsta naudoti „Vue“.js, nes tai suteikia neutralią aplinką.

Kaip HTML, Vue.js turi šablonų sintaksę, ir mes galime naudoti šablonų sintaksę susieti DOM su komponentų duomenimis. Šiame straipsnyje mes parodysime, kaip įterpti duomenis į šablono sintaksę ir įvairių tipų duomenų interpoliavimo būdus.

Teksto interpoliacija

Jei norime susieti kintamąjį iš santykinio komponento egzemplioriaus, galime naudoti dvigubus garbanotus petnešus, kurie taip pat vadinami „ūsų“ sintakse.

linuxhintText

Vue.js siūlo dvipusį susiejimą, o tai reiškia, kad pakeitus kintamojo vertę, elementas vėl bus pateiktas. Tačiau jei nenorime, kad jis būtų atnaujintas, galime naudoti v-kartą direktyvą.

linuxhintText

Neapdorotas HTML interpoliavimas

Vue.js neleidžia susieti paprasto teksto duomenų, tačiau mes galime susieti neapdorotą HTML tekstą naudodami v-html direktyvą. Žemiau pateiktame pavyzdyje mes turime kintamąjį komponente, vadinamą neapdorotasHTML kuriame yra neapdoroto HTML teksto.

duomenys ()
grįžti
msg: „Hello Vue“,
rawHTML: "

„Linuxhint“ yra Puiku

"

Mes galime susieti neapdorotasHTML kintantis naudojant v-html direktyvą.

The div žymoje bus p žyma jos viduje.

Atributai Interpoliacija

Neapdorotame HTML interpoliacijoje mes nenaudojome dvigubų garbanotų petnešų kintamajam susieti. Todėl, jei norime susieti kintamąjį HTML atribute, galime naudoti v-surišti direktyvą.

Išraiškos

Vue.js pateikia ne tik kintamojo susiejimo ypatybes. Vue.js gali būti naudojamas rašant įvairias išraiškas dvigubomis garbanotomis petnešomis.

skaičius + 1
patikrinti ? "true": "False"
arr.rūšiuoti ().atvirkščiai ()

Apvyniojimas

Šiame straipsnyje mes pristatėme „Vue“.JS paprasta, bet naudinga šablono sintaksė. Tačiau apie „Vue“ reikia sužinoti daug daugiau.js. Galite apsilankyti oficialioje „Vue“ svetainėje.js čia, ir jūs galite toliau mokytis apie „JavaScript“ naudodami „linuxhint“.com.