Programa siekiama suteikti tokias funkcijas, kurios kūrėjams palengvins ir pagreitins kūrimo procesą. Vue.„js“ yra tokia funkcijomis praturtinta „JavaScript“ sistema, teikianti daugybę integruotų funkcijų ir direktyvų, kad būtų galima greitai atlikti kūrimo procesą. Tačiau reikia kai kurių scenarijų, kai jums reikia kažkokios funkcijos, kurios nėra sistemos, todėl turite sukurti savo.
Šiame įraše sužinosime ir pažvelgsime į įmontuotas „Vue“ direktyvas.js sistemą, taip pat išmoksime kurti ir naudoti savo pačių pritaikytą „Vue“ direktyvą.
Direktyvą
Direktyvos yra atributai, kuriuos galite susieti su DOM elementais, prieš kuriuos nurodomas sakinys „v-“, kuris padeda bibliotekai žinoti, kad tai yra specialus sintaksės tipas, naudojamas kai kurioms užduotims atlikti. Tiesiogiai manipuliuojant DOM dažniausiai naudojamos direktyvos. Kai kurios labiausiai naudojamos ir žinomos direktyvos yra „v-if“, „v-for“ ir „v-show“.
Direktyvos naudojamos poveikiui DOM elementams pritaikyti, tačiau reaktyviai. Supraskime tai su pavyzdžiu:
„V-if“ direktyva
Galite peržiūrėti tekstą.
Pirmiau pateiktoje žymoje „v-if“ yra direktyva, kuri ištrins arba pridės pastraipos žymą „
“, Priklauso nuo„ showText “kintamojo teisingumo.
„V-show“ direktyva
Panašiai turime „v-show“ direktyvą, kuri gali atlikti tas pačias aukščiau aprašytas funkcijas:
Galite peržiūrėti tekstą.
Subtilus skirtumas tarp „v-if“ ir „v-show“ yra tas, kad „v-if“ nepadaro elemento kraunant puslapį, jei surištas kintamasis nėra teisingas ir jis įkeliamas, kai kintamasis tampa teisingas. Priešingai, „v-show“ padarys elementą tinklalapio įkėlimo metu, bet jį paslėps. Taigi „v-if“ yra efektyvus puslapio įkėlimo metu ir užima daug laiko, kai kintamasis tampa teisingas. Jis turi pateikti visą elementą, o „v-show“ yra efektyvus, atsižvelgiant į kintamojo, reikalaujančio daug laiko, teisingumą tinklalapio įkėlimo metu.
Gerai! Pažvelkime į direktyvą, kurioje pateikiamas argumentas.
„V-bind“ direktyva
Kita plačiausiai naudojama direktyva yra „v-bind“, naudojama sąveikaujant ir atnaujinant HTML atributus. Pvz., Jei norime susieti kokį nors kintamąjį su „href“ atributu žymą, mes galime susieti „href“ atributą taip:
„Netiesioginė“ direktyva
Kaip ir „v-bind“ direktyva, taip ir „Vue“ pateikia „v-on“ direktyvą, skirtą kintamajam susieti DOM paleistų įvykių klausymui. Pvz., Norint klausytis „Click“ įvykio ir susieti su juo kintamąjį, sintaksė būtų tokia:
Apverstuose kableliuose galime pateikti išraišką ir funkcijas.
Išvada
Sužinojome apie „Vue“ direktyvas ir sužinojome, kaip jas naudoti „Vue“.js. Aptarėme keletą dažniausiai naudojamų ir pagrindinių „Vue“ direktyvų.js, o tai labai padeda ir sutaupo daug laiko kūrime.