→ Vue 3 → Start Lernen / Flashcards Herunterladen MP3

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

Vue 3

Sie müssen eingeloggt sein, um einen Kommentar zu schreiben.

Mehr