→ Vue 3 → Start Learning / Download MP3 Flashcards

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

Vue 3

You must sign in to write a comment

More