Vue essentials

Published on Nov 7, 2021



Vue instance

  • data added after instance was created will not be reactive, that's why we layout properties at the beginning
  • $ means instance method
  • data, method
  • lifecycle hooks (e.g. created)
  • arrow function doesn't have this, don't use with lifecycle hooks

Template syntax

  • :[key]="url" is shorthand for v-bind
  • @click is shorthand for v-on

Computed properties and watchers

  • use computed for complex logic.
  • computed is cached based on their reactive dependencies (cheaper)
  • computed has setter and getter if needed
  • watch (use computed if can)

Class and style binding

  • can v-bind class and object (e.g. <div v-bind:class="[{ active: isActive }, errorClass]"></div>)
  • can bind class to template (so button base style can live in template)
  • can add array of prefix

Conditional rendering

  • v-if on template to toggle more elements
  • v-if else-if else
  • key attribute says "These two elements are completely separate - don’t re-use them"
  • v-show (always rendered, changing display) for things we toggle often, v-if for things that's unlikely to change at run time
  • don't use v-if with v-for. v-for has higher priority so v-if will run on each iteration. One way to do it is to nest if inside for

List rendering

  • can use of or in
  • can loop array or object(key uses obj.keys, not consistent across JS engine)
  • provide keys to v-for for tracking node's identity and perform “in-place patch” strategy
  • as mentioned in computed vs method: if we need to perform non-mutation method on v-for, we can compute. If we need to use it inside v-for, we can use method
  • can v-for n times
  • can render block with template (like we did with v-if)
  • when using with custom component, we need to pass data as props because cc has isolated scope
  • <li is="todo-item"> == <todo-item>

Event handling

  • $event is original DOM event (e.g. the one we can preventDefault on)
  • Vue has event modifiers for v-on (e.g. v-on:submit.prevent="onSubmit").
  • The order matters. (.prevent.self prevents all clicks whereas .self.prevent prevents the element itself)
  • don't use .passive and .prevent together. .passive communicates to the browser that you don’t want to prevent the event’s default behavior thus will be ignored
  • key modifiers (e.g. v-on:keyup.page-down="onPageDown" means call when $event.key is equal to PageDown)
  • key code (e.g. v-on:keyup.13). can also define custom ones (e.g. Vue.config.keyCodes.f1 = 112)
  • system modifier keys (e.g. v-on:keyup.alt.67="clear"). keyup.ctrl will only trigger if you release a key while holding down ctrl, use keyCode if you want to trigger when release ctrl
  • .exact means no other keys are pressed (e.g. v-on:click.ctrl.exact="onCtrlClick")
  • mouse button modifiers

Form Input Bindings

  • v-model is two way binding (v-bind + v-on). It ignores initial value, checked and selected so declare those in data
  • modifiers (e.g. .number, .trim)

Components Basics

  • a component’s data option must be a function
  • register component globally (can be used in the template of nay root Vue instance: new Vue) or locally
  • can pass data through props
  • every component must have a single root element (have to wrap components in an element)
  • $emit fires event to parent component
    • parent will on the event
    • can emit using name only OR with value
  • we need to bind the value to a value prop + emit custom target value on input when using v-model on component
  • use is in v-bind to create dynamic components
  • use is to handle DOM template parsing, e.g. have component inside <table>