Toto je možné použiť aj na podujatiach:
v-model v-onVypočítané vlastnosti Vypočítané vlastnosti sú spôsobom, ako vyčistiť kód a použiť ho namiesto výrazov vo vnútri vašich dvojitých fúzov alebo na iných miestach.
Predstavte si, že máte nasledujúci kód:
Namiesto toho môžete definovanú vypočítanú vlastnosť definovať ako nižšie a použiť ju namiesto najhorších programovacích jazykov:
let app = new Vue({ el: '#app', methods: { callMyfunction() { alert('This is it!'); } } }); callMyFunction Poradie nie je skutočné a neposudzujem žiadny programovací jazyk. Je to len na ukážku.
Vypočítané vlastnosti sú getre, čo znamená, že iba vracajú niečo a pri nastavovaní údajov nemajú žiadnu úlohu.
Toto správanie môžete zmeniť a nastaviť | _+_ | a | _+_ | metódy pre údaje, ako sú uvedené nižšie:
alert('Hello my friend')'> Keď sa pokúšate nastaviť údaje na | _+_ | vyššie uvedený kód rozdelí reťazec podľa medzery a nastaví prvú časť ako krstné meno a druhú časť ako priezvisko. ale pri získavaní údajov bude concat meno a priezvisko.
Pozorovatelia Obecnejší spôsob, ako zistiť, kedy sa údaje zmenia, je pomocou sledovateľov.
alert('Hello my friend')'> Poznámka : Pozorovatelia nemanipulujú s údajmi, pokiaľ nechcete.
Podmienené vykresľovanie Podmienené vykresľovanie sa používa, ak chcete zobraziť časti svojho používateľského rozhrania podľa niektorých podmienok.
Vaše podmienky môžu mať aj „iné-ak“:
Vue je chytrý a nahradí iba diely, ktoré sú odlišné.
Click on me if you can Aj keď pomocou | _+_ | Vue môžete povedať, že tieto polia sú úplne odlišné, a mali by ste ich znova vykresliť:
let app = new Vue({ el: '#app', data: { myAttr: 'disabled' } }); Prepnúť zobrazenie podmieneného vykresľovania Použitím | _+_ | prvok vykreslíte, ale skryjete (nastavením vlastnosti | _+_ | na | _+_ |) takto:
Hi Poznámka : | _+_ | nepodporuje | _+_ | prvok, ani nefunguje s | _+_ |.
Poznámka : | _+_ | je lenivý, čo znamená, že blok s falošnými podmienkami na začiatku nebude vykreslený, na druhej strane | _+_ | skutočne vykresľuje, ale skrýva blok.
Vykresľovanie zoznamu Vykreslenie zoznamu údajov je takmer ako opakovanie v iných programovacích jazykoch.
Vykresľovanie polí Často sa stáva, že chcete iterovať okolo poľa a vykresliť ich.
let app = new Vue({ el: '#app', data: { myEvent: 'click' } }); The best programming languages are: {{ programmingLanguages }}
Môžete tiež zadať druhý argument na prístup k indexu aktuálnej položky:
The best programming languages are: {{ programmingLanguages }}
stiahnutie sql servera localdb
let app = new Vue({ el: '#app', data: { programmingLangauges: 'JavaScript, C#, PHP, Python, LALALA, HOHOHO' } computed: { worstProgrammingLanguages() { return this.programmingLangauges.split(', ').reverse().join(', '); } } }); Vykresľovanie objektu Vykresľovanie objektov nie je ťažšie ako vykresľovanie v poli:
set getK názvu nehnuteľnosti môžete mať prístup aj pomocou druhého argumentu:
let app = new Vue({ el: '#app', data: { myFirstName: 'Adnan', myLastName: 'Babakan' } computed: { myFullName: { get(): { return this.myFirstName + ' ' + this.myLastName; }, set(v): { let parts = v.split(' '); this.myFirstName = parts[0]; this.myLastName = parts[1]; } } } }); myFullNamePrístup k indexu je dostupný aj pri iterácii okolo objektu:
let app = new Vue({ el: '#app', data: { myAge: 19 } watch: { myAge(v) { console.log('I'm now ' + v); } } }); Hello user Hi guest! Iterujte v dosahu Iterácia v rozsahu čísel je tiež veľmi jednoduchá:
Red like apple Blue like sky Hmmm.... Háčiky životného cyklu Háčiky životného cyklu sú jednoducho niektoré funkcie, ktoré bežia na konkrétnej udalosti/čase počas vášho komponentu Vue.
Pred vytvorením háčika Volá sa synchrónne bezprostredne po inicializácii inštancie, pred pozorovaním údajov a nastavením udalosti/sledovača.
Ukážka:
Username Email Vytvorený háčik Volá sa synchrónne po vytvorení inštancie. V tejto fáze inštancia dokončila spracovanie možností, čo znamená, že boli nastavené nasledovné: pozorovanie údajov, vypočítané vlastnosti, metódy, spätné volania hodiniek/udalostí. Fáza montáže však nebola spustená a vlastníctvo $ el ešte nebude k dispozícii.
Ukážka:
keyPred upevnením háčika Volá sa tesne pred začiatkom montáže: funkciu renderovania sa chystá vyvolať prvýkrát.
Poznámka : Tento háčik nie je volaný počas vykresľovania na strane servera.
Ukážka:
Username Email Namontovaný háčik Volá sa po pripojení inštancie, kde | _+_ | sa nahrádza novovytvoreným | _+_ |. Ak je koreňová inštancia pripojená k prvku v dokumente, | _+_ | bude tiež v dokumente, keď sa volá mount.
Poznámka : Tento háčik nie je volaný počas vykresľovania na strane servera.
Ukážka:
v-showPred aktualizáciou zaveste Volá sa pri zmene údajov pred opravou DOM. Je to dobré miesto na prístup k existujúcemu modelu DOM pred aktualizáciou, napr. na odstránenie ručne pridaných poslucháčov udalostí.
Poznámka : Tento háčik sa počas vykresľovania na strane servera nevolá, pretože iba počiatočné vykreslenie sa vykonáva na strane servera.
Ukážka:
displayAktualizovaný háčik Volaný po zmene údajov spôsobí, že virtuálny DOM bude znova vykreslený a opravený.
Keď sa zavolá tento háčik, DOM komponentu bude aktualizovaný, takže tu môžete vykonávať operácie závislé na DOM. Vo väčšine prípadov by ste sa však mali vyhnúť zmene stavu vo vnútri háku. Na reakciu na zmeny stavu je zvyčajne lepšie použiť vypočítanú vlastnosť alebo prehliadač.
Poznámka : Tento háčik nie je volaný počas vykresľovania na strane servera.
Ukážka:
nonePred zničením háčika Volá sa tesne pred zničením inštancie Vue. V tejto fáze je inštancia stále plne funkčná.
Poznámka : Tento háčik nie je volaný počas vykresľovania na strane servera.
Ukážka:
Hello there! Zničený háčik Volá sa po zničení inštancie Vue. Keď sa zavolá tento háčik, všetky smernice inštancie Vue boli neviazané, všetci poslucháči udalostí boli odstránení a všetky podradené inštancie Vue boli tiež zničené.
Poznámka : Tento háčik nie je volaný počas vykresľovania na strane servera.
Ukážka:
v-showDiania Udalosti sa volajú, keď sa s prvkom vykoná konkrétna akcia.
V predchádzajúcom cheat hárku Vue som ich popísal skutočne v podstate. Tu popíšem viac aspektov udalostí.
Majte na pamäti, že | _+_ | je krátka ruka | _+_ |.
Dostupné akcie Použitím | _+_ | máte prístup k všetkým udalostiam JavaScriptu. Tu je niekoľko ukážok:
Môžete tiež | _+_ | udalosť na formulároch:
v-elseModifikátory udalostí Modifikátory udalostí sa používajú na zmenu niektorého správania sa udalosti alebo na jej väčšiu kontrolu.
Modifikátory sa pridávajú za | _+_ | po udalosti.
Toto je štruktúra | _+_ | alebo | _+_ |.
Modifikátory je možné tiež reťaziť a vykonávať v príslušnom poradí, napríklad: | _+_ |
Zastaviť úpravu v-ifZabrániť úprave v-showZachytiť úpravu v-forPo úprave Vlastná úprava var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }); Pasívna úprava {{ index }} - {{ item.message }} Modifikátory kľúčov Počúvanie udalosti s klávesnicami je jednoduché, ale na zistenie, ktoré tlačidlo je stlačené, bude potrebný kód kľúča. Vue má niekoľko modifikátorov, aby pri udalostiach na klávesnici počúval konkrétny kľúč.
Tieto modifikátory je možné použiť s akýmikoľvek kľúčovými udalosťami, ako napríklad | _+_ | alebo | _+_ |
Zadajte modifikátor kľúča var example2 = new Vue({ el: '#example-2', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }); Modifikátor klávesu Tab Odstrániť modifikátor kľúča new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Modifikátor klávesu Esc Modifikátor medzerníka new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Modifikátor klávesu hore {{ index }}. {{ name }}: {{ value }} Modifikátor klávesu nadol new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Pravý modifikátor kľúča {{ n }} Modifikátor ľavého klávesu let app = new Vue({ beforeCreate() { console.log('I'm not created yet'); } }); Modifikátor domovského kľúča let app = new Vue({ created() { console.log('I'm created'); } }); Modifikátor kľúča Koniec let app = new Vue({ beforeMount() { console.log('Let's begin!'); } }); Modifikátor klávesu Ctrl nadol elModifikátor klávesov Alt -down vm.$elModifikátor klávesov posunúť nadol vm.$elMeta down modifikátor kľúča let app = new Vue({ mounted() { console.log('I'm ready!'); } }); Kód vlastného kľúča Ak Vue neposkytuje alias pre požadovaný kľúč, môžete použiť jeho kód kľúča, ako je uvedené nižšie:
let app = new Vue({ beforeUpdate() { console.log('Your DOM is about to change. Be careful!'); } }); Kód kľúča 49 je pre číslo 1 v hornej časti klávesnice. (Nie je to numerická klávesnica)
Kombinácia modifikátorov kľúčov Modifikátory kľúčov môžete reťaziť za účelom vytvorenia kombinovanej štruktúry takto:
let app = new Vue({ updated() { console.log('Hello new DOM!'); } }); Presný modifikátor kľúča Použitie | _+_ | vám umožní zachytiť potrebné tlačidlo a nič iné sa nedá kombinovať.
Použitím nižšie uvedeného kódu, ak podržíte shift a stlačíte ctrl, bude reagovať normálne:
let app = new Vue({ beforeDestroy() { console.log('Well it's the time I think...'); } }); Použitím nižšie uvedeného kódu je však potrebné stlačiť iba kláves ctrl:
let app = new Vue({ destroyed() { console.log('BOOOOM!'); } }); Komponenty Komponenty sú opakovane použiteľné inštancie Vue používané na zjednodušenie kódu a jeho lepšie rozdelenie.
Toto je komponent Vue:
@Ako môžete, má v sebe vloženú šablónu, ako aj údaje, ktoré používa, a je možné ich použiť v iných komponentoch Vue, ako napríklad:
v-on:Výsledkom budú tri rôzne tlačidlá, ktoré nemajú nič spoločné. Každý z nich bude fungovať oddelene a každý má svoje vlastné | _+_ | údaje.
Dôležité : Pri definovaní komponentu | _+_ | by mala byť funkciou vracajúcou objekt, ak nie každá inštancia nebude mať svoje vlastné údaje a bude zdieľaná.
Komponent jedného súboru Jeden súborový komponent (alebo SFC) je komponent, ktorý je v jednom súbore (sakra! Naozaj?).
Má čistejšiu syntax a je nasledujúci:
v-onRegistrácia komponentov Registráciou komponentov ich môžete používať vo svojich šablónach.
Globálna registrácia komponentov Vďaka tejto metóde bude váš komponent dostupný v každej inštancii Vue (v prípade, že máte viac ako jeden):
alert('Hello')'>Do it alert('Hello')'>Do it alert('Hello')'>Do it alert('Hello')'>Do it Registrácia s rozsahom inštancie Ak to urobíte, komponent bude k dispozícii iba v zadanej inštancii Vue:
submitLenivá registrácia komponentu načítania Táto metóda je celkom efektívna, pretože nebude spájať váš komponent s hlavným vstupným súborom, takže sa vaše webové stránky načítajú rýchlejšie a budú potrebné iba potrebné komponenty.
alert('This form is submitted')'> Bonusový tip : Toto extrahuje vaše komponenty pomenované číslami od 0 a tak ďalej. Ak používate webpack, môžete pomocou kúzelného komentára zmeniť názvy súborov svojich komponentov nasledovne:
.Rekvizity komponentov Komponenty môžu mať rekvizity, ktoré pôsobia doslova ako atribúty značiek HTML.
Tým, že má komponent ako tento:
v-on:event.modifierMôžete to použiť takto:
@event.modifier Poznámka : Pri definovaní rekvizít je lepšie ich definovať pomocou camelCase, ale keď ho používate, použite ho ako puzdro na kebab. Aj keď je možné vo Vue použiť rekvizity definované ako prípad kebabu ako camelCase, IDE by sa z toho mohlo zamotať.
Vaše komponenty jedného súboru môžu mať aj rekvizity:
@event.modifier-one.modifier-twoSloty komponentov Sloty sa používajú na vloženie ďalších prvkov alebo komponentov do komponentu.
Jednoduchý slot Jednoduchý slot je nemenovaný slot a používa sa v šablóne ako je uvedené nižšie:
Po definovaní vyššie uvedenej šablóny za predpokladu, že názov komponentu je | _+_ | a | _+_ | je rekvizita, môžete ju použiť nasledovne:
Ako vidíte, vnútri našich komponentov je text, ktorý bude vložený namiesto | _+_ |.
Pomenované sloty Pomenované automaty sa trochu líšia od nemenovaných.
Definovaním komponentu s názvom | _+_ | Páči sa ti to:
... Môžete to použiť takto:
Obmedzené sloty Slot môže mať prístup k svojej rodičovskej rekvizite, aby sa takémuto niečomu (ak je to potrebné) mohol vyhnúť, môžete definovať rekvizitu pre slot nasledovne:
... A pri použití:
... Tento slot bude používať | _+_ | k dispozícii v komponente a nie v tom, ktorý je k dispozícii v nadradenom komponente.
Mixíny Aby to bolo jednoduché, mixiny sú iba časti vašej súčasti uložené v samostatnom súbore súborov, ktoré je možné znova použiť v iných zložkách.
Mix môže vyzerať takto:
keydownAko vidíte, toto má | _+_ | háčik a metóda s názvom | _+_ | teraz teda toto miešanie môže byť použité v komponente, ako je uvedené nižšie:
keyupBude to teda fungovať, ako keby ste tie háčiky a metódy napísali v tomto komponente.
Miešanie možnosti zlúčenia V prípade akýchkoľvek konfliktov medzi vlastnosťami alebo metódami priradenými komponentom a vlastnosťami mixov bude mať prioritu samotný komponent, pozrite si toto:
alert('Hey there!')'> Spôsob, akým Vue zvláda prepisovanie, je možné zmeniť, ale rozoberieme to v druhom cheat hárku.
Globálne mixiny Globálny mixin sa nelíši od bežného mixinu, a nie od jeho rozsahu pôsobnosti, ktorý bude zahŕňať všetky vytvorené inštancie Vue.
alert('Hey there!')'> Metóda | _+_ | bude k dispozícii pre každý komponent a inštanciu Vue vo vyššie uvedenom kóde.
Vlastné smernice Ako viete, direktívy sú spôsob, akým Vue zaobchádza s DOM. Napríklad | _+_ | alebo | _+_ | sú smernice.
Ak chcete definovať smernicu, postupujte takto:
alert('Hey there!')'> | _+_ | smernica bude k dispozícii ako | _+_ | a dá sa použiť takto:
alert('Hey there!')'> Vstup sa teda zameria hneď, ako sa komponent vykreslí.
Vlastné globálne smernice Aby boli vaše vlastné smernice dostupné vo vašej inštancii Vue a globálne, môžete ju definovať takto:
alert('Hey there!')'> Filtre Filtre sa jednoducho používajú na zmenu hodnoty a vrátenie.
Ak chcete definovať filter v komponente, môžete postupovať nasledovne:
alert('Hey there!')'> Potom je možné použiť filter veľkých písmen ako je uvedené nižšie:
alert('Hey there!')'> Alebo vo väzbe v tvare V, ako je uvedené nižšie:
alert('Hey there!')'> Globálne filtre Globálne filtre sa nelíšia od bežných filtrov, ale budú definované raz a môžu byť použité v každej inštancii alebo komponente Vue.
alert('Hey there!')'> Router Router Vue sa používa na návrh smerovacieho systému na strane klienta pomocou Vue.
Začíname so smerovačom Aby ste mohli router začať používať, musíte si ho nainštalovať. Toto sú kroky:
Inštalácia smerovača Odporúča sa nainštalovať pomocou npm:
alert('Hey there!')'> Je možné ho nainštalovať tak, že priložíte aj súbor:
alert('Hey there!')'> Po inštalácii je načase povedať Vue, aby použil smerovač. Ak to chcete urobiť, postupujte takto:
alert('Hey there!')'> Vaše komponenty, ktoré sú viazané na trasy, by mali byť vykreslené niekde na vašej stránke. Toto sa musí vyhlásiť takto:
alert('Hey there!')'> Definovanie trás Každá trasa bude mať svoj vlastný jedinečný viazaný komponent. Trasy môžete definovať nasledovne:
alert('Hey there!')'> Ak chcete posunúť trasy do histórie prehliadača používateľa, mali by ste aktivovať režim histórie, ako je uvedené nižšie:
alert('Hey there!')'> A potom pripojte svoje trasy k svojej inštancii zobrazenia:
alert('Hey there!')'> Poznámka : Ak používate režim histórie, na presmerovanie všetkých vašich požiadaviek na váš | _+_ | súbor, aby sa Vue o ostatné postaralo, mali by ste nakonfigurovať svoj webový server. Pokiaľ obnovením prehliadača na stránke nevráti 404, pretože daná stránka v skutočnosti na serveri neexistuje.
Odkazy na smerovače Odkazy na smerovače sú špeciálne, pretože neobnovujú stránku, ale iba získavajú potrebné komponenty (a posúvajú adresu URL do histórie v režime histórie), takže sa javí ako nová stránka.
Namiesto hypertextového odkazu (| _+_ | tag) by ste mali použiť | _+_ | ako je uvedené nižšie:
alert('Hey there!')'> Pokročilé smerovanie Router Vue presahuje niekoľko jednoduchých trás a ponúka niekoľko skvelých spôsobov manipulácie s trasami.
Dynamické trasy Dynamické trasy sa používajú na priradenie série trás k niektorým parametrom, ktoré sa majú získať.
Dynamická trasa je definovaná rovnako ako normálna trasa, ale s dvojbodkou na začiatku dynamických segmentov:
exactTeraz cestou cez všetky odkazy, ako napríklad | _+_ |, | _+_ | alebo | _+_ | je platné.
| _+_ | je prístupný v komponente trasy, ako je uvedené nižšie:
alert('Hey there!')'> Reaguje na zmeny parametrov dynamických trás Vzhľadom na vyššie uvedený príklad. Ak sa používateľ presunie z | _+_ | do | _+_ | Vue nezničí predchádzajúcu inštanciu, pretože už bude znova vykreslený ten istý komponent, takže háčiky životného cyklu nebudú volané, aby reagovali na akékoľvek zmeny parametrov, ktoré môžete sledovať | _+_ | predmet ako
alert('Hey there!')'> Trasa 404 Každý web potrebuje skvelú trasu 404. V smerovači Vue môžeme definovať hviezdičku | _+_ | trasa na konci, takže zachytí všetko, čo nie je definované.
Pozor : Trasa hviezdičky by mala byť definovaná na konci a po akejkoľvek inej trase. Pokiaľ nebude zodpovedať všetkému ostatnému a zničí váš smerovací systém.
Ak to chcete urobiť, pozrite sa na nasledujúci kód:
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' }) Trasy s hviezdičkou Hviezdičky je možné použiť na priradenie iného druhu dynamických trás. Dynamická trasa sa môže zhodovať iba s dynamickými segmentmi medzi dvoma lomkami | _+_ | ale hviezdička to dokáže.
firefox neotvorí mac
Pozrite sa na trasu nižšie:
Takže podľa trasy vyššie, ako napríklad | _+_ | a | _+_ | je možné vykresliť.
Použitím trasy pod | _+_ | bude mať nehnuteľnosť s názvom | _+_ | ktorý bude zahŕňať časť, ktorá zodpovedala hviezdičke.
Pomenované trasy Pomenované trasy sa používajú na prístup k dlhým trasám s ich kratším názvom.
Predstavte si, že máte takýto vzor:
countNázov preň môžete definovať takto:
dataTeraz môžu vaše odkazy vyzerať takto:
export default { }; Namiesto tohto:
import Vue from 'vue'; Vue.component('my-component', require('/path/to/your/component')); Poznámka : Pri odovzdávaní objektu | _+_ | atribút by ste to mali viazať.
Pomenované trasy s parametrami Niektoré trasy môžu mať parametre, pretože sme mali niekoľko príkladov vyššie. Môžete im tiež definovať názov.
Napríklad pre trasu uvedenú nižšie:
import Vue from 'vue'; const myComponent = require('/path/to/your/component'); let app = new Vue({ components: { myComponent } }); Môžete mať toto:
import Vue from 'vue'; const myComponent = () => import('./components/myComponent '); let app = new Vue({ components: { myComponent } }); A aby ste na to mohli vytvoriť odkaz, môžete mať nasledujúci kód:
import Vue from 'vue'; const myComponent = () => import(/* webpackChunkName: 'myComponent' */ './components/myComponent '); let app = new Vue({ components: { myComponent } }); Programová navigácia Ako ste si už predtým prečítali v tomto podvodnom hárku, môžete vytvoriť odkaz na smerovač pomocou | _+_ | ale čo keby ste potrebovali programovo presmerovať používateľa? Môžete to urobiť pomocou tohto kódu:
Vue.component('blog-post', { props: ['postTitle'], template: '{{ postTitle }} ' }) Tento kód presmeruje vášho používateľa na | _+_ |. Toto sa používa najmä v stave alebo v iných situáciách, ako je presmerovanie po prihlásení.
Programová pomenovaná navigácia Môžete tiež použiť | _+_ | pre pomenované trasy takto:
Programová navigácia s parametrami Tiež | _+_ | je možné použiť na presmerovanie pomocou parametrov, ako je toto:
export default { props: ['myProp']; }; Presmerovanie trasy Trasy je možné definovať tak, aby boli navzájom presmerované. Páči sa ti to:
Trasa s názvom presmerovanie Trasu je tiež možné presmerovať na pomenovanú trasu takto:
navigation-linkDynamické presmerovanie trasy Trasu je možné presmerovať pomocou funkcie na vyhodnotenie cieľa takto:
urlPresmerovanie trasy pomocou parametrov Ak má cieľová trasa parameter, je možné ju tiež odovzdať do cieľa:
Your profile Alias trasy Alias trasy znamená, že na trasu môže byť prístupných viac adries.
Napríklad:
Teraz trasa | _+_ | je prístupný ako | _+_ | tiež.
Trasa môže mať aj viacero aliasov:
base-layoutVynútené vykreslenie V niektorých prípadoch je potrebné vynútiť Vue, aby znova vykreslil váš komponent, pretože nebude sledovať niektoré zmeny.
Existuje niekoľko spôsobov, ako to urobiť, napríklad pomocou | _+_ | hack, ale správnym spôsobom je použitie | _+_ | metóda:
Majte na pamäti, že | _+_ | je nevyhnutné použiť túto metódu vo vašej inštancii Vue.
Sledovanie vnorených údajov Niekedy budete musieť sledovať niektoré vnorené údaje, môžete to urobiť pomocou bodovej notácie:
A paragraph for the main content.
And another one.
Here's some contact info
Vyššie uvedený kód je, keď viete, ktorú nehnuteľnosť vo svojom objekte máte sledovať!
{{ user.lastName }} Hodinky nemôžete definovať ako funkciu okamžite, ale ako objekt, potom pomocou | _+_ | kľúč a hodnotu | _+_ | sledujte svoj objekt a vložte to, čo chcete, aby sa spustilo, keď sa údaje zmenia, do funkcie s názvom | _+_ |.
Vlastné komponenty s podporou v-modelu Ako viete | _+_ | sa používa na vytvorenie obojsmernej väzby so vstupným prvkom/komponentom a vlastnosťou údajov.
Ak vyrábate vlastný komponent a chcete, aby podporoval | _+_ | môžete vydať | _+_ | kľúčové slovo a aby ste pomocou | _+_ |. prijali to, čo je vášmu komponentu odoslané na začiatku jednoducho si musíte zaobstarať rekvizitu s názvom | _+_ |.
Pre jednoduchšie pochopenie skontrolujte nasledujúci kód:
{{ slotProps.user.firstName }} Tento jednoduchý komponent bude viazať údaje, ktoré mu boli odovzdané, v dvoch smeroch.
Poznámka : Ako vidíte, priradil som rekvizitu s názvom | _+_ | na údaje s názvom | _+_ | a použil by som to v mojom vstupe, môžete si myslieť, že by som mohol prepnúť rekvizitu priamo na môj vstup, ale ako Vue navrhuje, je lepšie nemeniť rekvizity priamo.
Funkčná zložka Predstavte si, že máte komponent bez hodiniek alebo vypočítaných vlastností a bez metód! Použili by ste to iba na vykreslenie niektorých ďalších komponentov ako jedného s niektorými rekvizitami. Ak je to tak, prečo strácať čas Vue, keď neexistujú žiadne metódy životného cyklu?
Funkčnú zložku je možné definovať nasledovne:
user Poznámka : Majte na pamäti, že neexistuje | _+_ | kontext v týchto komponentoch, pretože ide o funkčný komponent!
#vuejs #javascript #webdev