→ Vue 3 → Start Learning / Flashcards Téléchargement MP3

question		réponse
inicjowanie projektu przez npm commencer à apprendre		npm init vue@latest
inicjowanie projektu przez vite commencer à apprendre		npm create vite@latest
tworzenie aplikacji commencer à apprendre		createApp(component). mount('#app')
globalny error handler commencer à apprendre		app. errorHandler=(err)=>{}
podłączanie routera commencer à apprendre		app. use(router)
wstawianie html commencer à apprendre		v-html="rawHtml"
wiązanie pojedynczego atrybutu, np id commencer à apprendre		:id="myId"
wiązanie wielu atrybutów, np id i class commencer à apprendre		v-bind="{id:'myId'class='myClass}"
wstawianie jako tekst, pomiędzy tagi commencer à apprendre		{{myText}}
wywoływanie funkcji w wyrażeniach, np przy bindowaniu disabled commencer à apprendre		:disabled="isDisabled()"
wywoływanie funkcji na evencie, np click commencer à apprendre		@click="doSmt()"
anulowanie domyślnego zachowania eventu, np submit commencer à apprendre		@submit. prevent="doSmt()"
wywoływanie funkcji z pojedynczym klawiszem specjalnym commencer à apprendre		@click. ctrl. exact
wywoływanie funkcji na prawym klawiszu myszy commencer à apprendre		@click. right
bindowanie funkcji na dynamicznym evencie commencer à apprendre		v-on:[eventName]
przekazywanie defaultowego obiektu event do handlera commencer à apprendre		@click="doSmt(123,$event)"
nasłuchiwanie w parencie na customowy event commencer à apprendre		@myEvent="doSmt()"
Hook, the component has finished setting up its reactive state, but no DOM nodes have been created yet commencer à apprendre		onBeforeMount
Hook, component has finished the initial rendering and created the DOM nodes commencer à apprendre		onMounted
Hook, can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook. commencer à apprendre		onBeforeUpdate
Hook, called after the component has updated its DOM tree due to a reactive state change commencer à apprendre		onUpdated
Hook, all of child components have been unmounted commencer à apprendre		onUnmounted
Two way data binding in forms commencer à apprendre		v-model="myValue"
Tags which support v-model commencer à apprendre		input, textarea, select
Dynamiczna wartość true dla checkboxa commencer à apprendre		true-value="yes"
v-model radio commencer à apprendre		input type="radio" value="myValue" v-model="myRef"
v-model zastępuje commencer à apprendre		input: value="text" @input="event => text=event. target. value"
2 way binding w parent'cie, np referencji parentRefName commencer à apprendre		v-model: propChildName="parentRefName"
2 way binding w child'zie, np referencji propChildName commencer à apprendre		defileProps(['propChildName']); defineEmits(['update: propChildName'])<input: value="propChildName" @input="$emit('update: propChildName', $event. target. value)"
updatowanie zbindowanej wartości po evencie change commencer à apprendre		v-model. lazy="text"
castowanie zbindowanego modelu na number, np wieku commencer à apprendre		v-model. number="age"
trimowanie zbindowanego modelu, np ulicy commencer à apprendre		v-model. trim="street"
iterowanie po obiektach commencer à apprendre		v-for="(item, index) in items": key="item. id"
iterowanie po zakresie liczb commencer à apprendre		v-for="n in 10": key="n"
iterowanie po kluczach obiektu commencer à apprendre		v-for="(value, key, index) in myObject"
referencja z typem commencer à apprendre		ref<number>()
dyrektywa css display commencer à apprendre		v-show
korzystanie z nazwanego slotu w parencie, np childSlotName commencer à apprendre		template #childSlotName
korzystanie z nienazwanego slotu w parencie commencer à apprendre		template #default
definiowanie slotu w child'zie commencer à apprendre		slot name="childSlotName"
dyrektywa anulująca aktualizację componentu na zmianach referencji commencer à apprendre		v-once
referencja DOM, np myInput commencer à apprendre		input ref="myInput">const myInput=ref(null)
focusowanie pola w formularzu on load commencer à apprendre		onMounted(()=>{myInput. value. focus()})
bindowanie klas css jako inline condition commencer à apprendre		:class="{'myClass1': isClass1, 'myClass2': isClass2 }"
bindowanie klas css jako computed commencer à apprendre		const myClasses=computed(()=>({'myClass1': isClass1, 'myClass2': isClass2 }): class="myClasses"
bindowanie klas css jako array refów commencer à apprendre		const myClasses=ref(['myClass1', 'myClass2']): class="myClasses"
cashowanie stanu komponentu kiedy nie jest już wyświetlany commencer à apprendre		const myComp=shallowRef(MyComp) <KeepAlive><component: is="myComp">
tranzycja commencer à apprendre		. v-enter-active,. v-leave-active {transition: opacity 0.5s ease}. v-enter-from,. v-leave-to {opacity: 0}
customowa dyrektywa focus commencer à apprendre		const vFocus={mounted: (el) => el. focus()} <input v-focus />
transition between components commencer à apprendre		transition mode="out-in"
watcher na referencji commencer à apprendre		watch(myRef, async (newValue, oldValue) => {})
watcher który jest trigerowany na każdej zmianie referencji commencer à apprendre		watchEffect(async () => {await fetch('https://mydomian.com/${myRef. value}`)})
eager watcher commencer à apprendre		{immediate: true}
obserwowanie wyniku wyrażenia commencer à apprendre		watch(() => (first. value+second. value), (sum)=>{})
asynchroniczne wgrywanie componentów commencer à apprendre		defineAsyncComponent({loader, loadingComponent, delay, errorComponent, timeout})
routing guard commencer à apprendre		router. beforeEach(async (to, from, next) => {})
router init commencer à apprendre		createRouter({history: createWebHistory(), routes: [{path" ", component: MyComp}]})
deklarowanie wstrzykiwanej wartości commencer à apprendre		provide('myRef', myRef)
wstrzykiwanie wartości commencer à apprendre		const myRef=inject('myRef')
What is the CLI command to create a new Vue. js SPA with the official Vue project scaffolding tool (create-vue)? commencer à apprendre		npm init vue@latest
Hook called after the component instance is inserted into the DOM as part of a tree cached by <KeepAlive> commencer à apprendre		onActivated
Hook called after the component instance is removed from the DOM as part of a tree cached by <KeepAlive> commencer à apprendre		onDeactivated
Hook to be called when an error propagating from a descendant component has been captured commencer à apprendre		onErrorCaptured
Component used to create links between routes commencer à apprendre		RouterLink
Component to embed router content placeholder commencer à apprendre		RouterView
Get value of a route param, like id commencer à apprendre		const route = useRoute() const id = parseInt(route. params. id)
Redirect with view router commencer à apprendre		redirect: to => ({path: '/'})
Programatic router redirect with query param commencer à apprendre		router. push({path: '/register', query: {plan: 'private'}})
Redirect in router with history replacement commencer à apprendre		router. replace
wstrzykiwanie parametrów do props w routerze commencer à apprendre		props: route => ({myparam: route. params. myparam})
dyrektywa która odpali eventhandler tylko taż commencer à apprendre		once
disable fallthrough attribute propagation commencer à apprendre		defineOptions({inheritAttrs: false})
access fallthrough attribute commencer à apprendre		$attrs
bindowanie wszystkich fallthrough attributes commencer à apprendre		v-bind="attrs"

Vue 3

Vous devez vous connecter pour poster un commentaire.

plus