→ Vue 3 → Empezar lección / Descargar tarjetas en MP3

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

Vue 3

Debes iniciar sesión para poder comentar.

Más