Vue3$View-Template

0. Content

1. text interpolation: `{{ message }}`
2. raw HTML: `v-html`
3. text: `v-text`

- `v-once`
- `v-memo`: in v-for: v-memo="selected === image.id"

1. Attribute Bindings

1. `v-bind`: `v-bind:id='someIdData'` // one
2. `v-bind`: `v-bind="someObj"` // many
3. `:`: `:id='someIdData'`
4. // boolean: false: falsy except ''.

2. Event Handling

1. @click // inline handlers / method handlers ($event, (event) => {})
2. Event Modifiers: @click.stop=""
	1. .stop, .prevent, .self, .capture, .once, .passive
3. Key Modifiers: @keyup.enter, @keyup.page-down
	1. Key Aliases: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
	2. System Modifier Keys(keydown): .ctrl, .alt, .shift, .meta
	3. .exact
4. Mouse Button Modifiers: .left, .right, .middle

3. Conditional Rendering & List Rendering

1. Conditional Rendering

v-if, v-else, v-else-if
<template v-if="true"></template>
v-show: when with component, component should has a single root element.

2. List Rendering

<template v-for="(item, index) of list" :key="item.id"></template>
<template v-for="(value, key, index) in obj" :key="item.id"></template>

4. class & style

1. class

1. object: `:class={ active: isActive }`
2. array: `:class="[activeClass, errorClass]"` // activeClass: string / object
3. string

<!-- multiple roots: $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

2. style

1. object `<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>`
2. array `<div :style="[baseStyles, overridingStyles]"></div>`

5. Form Input Bindings

// v-model is just a syntactic sugar
<input v-model="text">
<input
  :value="text"
  @input="event => text = event.target.value">

value & event based on their types:
- input / textarea: value & input
- checkbox / radio: checked & change
- select: value & change

Modifiers:
- .lazy: input ==> change
- .number: parseFloat() ===> original value (if can't)
- .trim

- Directives

// Directives: accept expressions. (except a few: v-for, v-on && v-slot).
// It's job: when its expression changes, update DOMs reactively.
1. attribute: `:href="url"`
2. event: `@click="doSomething"`
3. rendering: `v-if="seen"`
	
- Dynamic Arguments: `:[attributeName]="url"`
- modifiers: `@submit.prevent="onSubmit"`

Links

Vue3TemplateSyntax

Vue3EventHandling

Vue3ConditionalRendering

Vue3ListRendering

Vue3ClassAndStyle

Vue3Form