Vue 3

inicjowanie projektu przez npm

npm init vue@latest

inicjowanie projektu przez vite

npm create vite@latest

tworzenie aplikacji

createApp(component). mount('#app')

globalny error handler

app. errorHandler=(err)=>{}

podłączanie routera

app. use(router)

wstawianie html

v-html="rawHtml"

wiązanie pojedynczego atrybutu, np id

:id="myId"

wiązanie wielu atrybutów, np id i class

v-bind="{id:'myId'class='myClass}"

wstawianie jako tekst, pomiędzy tagi

{{myText}}

wywoływanie funkcji w wyrażeniach, np przy bindowaniu disabled

:disabled="isDisabled()"

wywoływanie funkcji na evencie, np click

@click="doSmt()"

anulowanie domyślnego zachowania eventu, np submit

@submit. prevent="doSmt()"

wywoływanie funkcji z pojedynczym klawiszem specjalnym

@click. ctrl. exact

wywoływanie funkcji na prawym klawiszu myszy

@click. right

bindowanie funkcji na dynamicznym evencie

v-on:[eventName]

przekazywanie defaultowego obiektu event do handlera

@click="doSmt(123,$event)"

nasłuchiwanie w parencie na customowy event

@myEvent="doSmt()"

Hook, the component has finished setting up its reactive state, but no DOM nodes have been created yet

onBeforeMount

Hook, component has finished the initial rendering and created the DOM nodes

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.

onBeforeUpdate

Hook, called after the component has updated its DOM tree due to a reactive state change

onUpdated

Hook, all of child components have been unmounted

onUnmounted

Two way data binding in forms

v-model="myValue"

Tags which support v-model

input, textarea, select

Dynamiczna wartość true dla checkboxa

true-value="yes"

v-model radio

input type="radio" value="myValue" v-model="myRef"

v-model zastępuje

input: value="text" @input="event => text=event. target. value"

2 way binding w parent'cie, np referencji parentRefName

v-model: propChildName="parentRefName"

2 way binding w child'zie, np referencji propChildName

defileProps(['propChildName']); defineEmits(['update: propChildName'])<input: value="propChildName" @input="$emit('update: propChildName', $event. target. value)"

updatowanie zbindowanej wartości po evencie change

v-model. lazy="text"

castowanie zbindowanego modelu na number, np wieku

v-model. number="age"

trimowanie zbindowanego modelu, np ulicy

v-model. trim="street"

iterowanie po obiektach

v-for="(item, index) in items": key="item. id"

iterowanie po zakresie liczb

v-for="n in 10": key="n"

iterowanie po kluczach obiektu

v-for="(value, key, index) in myObject"

referencja z typem

ref<number>()

dyrektywa css display

v-show

korzystanie z nazwanego slotu w parencie, np childSlotName

template #childSlotName

korzystanie z nienazwanego slotu w parencie

template #default

definiowanie slotu w child'zie

slot name="childSlotName"

dyrektywa anulująca aktualizację componentu na zmianach referencji

v-once

referencja DOM, np myInput

input ref="myInput">const myInput=ref(null)

focusowanie pola w formularzu on load

onMounted(()=>{myInput. value. focus()})

bindowanie klas css jako inline condition

:class="{'myClass1': isClass1, 'myClass2': isClass2 }"

bindowanie klas css jako computed

const myClasses=computed(()=>({'myClass1': isClass1, 'myClass2': isClass2 }): class="myClasses"

bindowanie klas css jako array refów

const myClasses=ref(['myClass1', 'myClass2']): class="myClasses"

cashowanie stanu komponentu kiedy nie jest już wyświetlany

const myComp=shallowRef(MyComp) <KeepAlive><component: is="myComp">

tranzycja

. v-enter-active,. v-leave-active {transition: opacity 0.5s ease}. v-enter-from,. v-leave-to {opacity: 0}

customowa dyrektywa focus

const vFocus={mounted: (el) => el. focus()} <input v-focus />

transition between components

transition mode="out-in"

watcher na referencji

watch(myRef, async (newValue, oldValue) => {})

watcher który jest trigerowany na każdej zmianie referencji

watchEffect(async () => {await fetch('https://mydomian.com/${myRef. value}`)})

eager watcher

{immediate: true}

obserwowanie wyniku wyrażenia

watch(() => (first. value+second. value), (sum)=>{})

asynchroniczne wgrywanie componentów

defineAsyncComponent({loader, loadingComponent, delay, errorComponent, timeout})

routing guard

router. beforeEach(async (to, from, next) => {})

router init

createRouter({history: createWebHistory(), routes: [{path" ", component: MyComp}]})

deklarowanie wstrzykiwanej wartości

provide('myRef', myRef)

wstrzykiwanie wartości

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)?

npm init vue@latest

Hook called after the component instance is inserted into the DOM as part of a tree cached by <KeepAlive>

onActivated

Hook called after the component instance is removed from the DOM as part of a tree cached by <KeepAlive>

onDeactivated

Hook to be called when an error propagating from a descendant component has been captured

onErrorCaptured

Component used to create links between routes

RouterLink

Component to embed router content placeholder

RouterView

Get value of a route param, like id

const route = useRoute() const id = parseInt(route. params. id)

Redirect with view router

redirect: to => ({path: '/'})

Programatic router redirect with query param

router. push({path: '/register', query: {plan: 'private'}})

Redirect in router with history replacement

router. replace

wstrzykiwanie parametrów do props w routerze

props: route => ({myparam: route. params. myparam})

dyrektywa która odpali eventhandler tylko taż

once

disable fallthrough attribute propagation

defineOptions({inheritAttrs: false})

access fallthrough attribute

$attrs

bindowanie wszystkich fallthrough attributes

v-bind="attrs"