Typescript setup

Notes on the course custom directives from vueschool.io by Daniel Kelly and Alex Kyriakidis.

• directives is a special attribute defined by v-
  • v-if
  • v-show
  • v-bind - bind reactive data
  • v-on
    • receives the callback to be executed
    • modifiers
      • .prevent
  • powerful abstraction
    • use only when desired functionality can be achieved via accessing DOM directly.
• v-purple / v-color
  • define a function with the prefix v
    • in the setup function
  • in options API define the function in the block directives
  • use __DIRECTIVE__ to avoid collision
  • first argument is the element (HTML)
  • second argument are the bindings
    • bindings.arg is used to define custom argument to a directive
      • <p v-color:slow=”[‘blue’]”>a</p>
    • bindings.modifiers is used to define custom modifiers
      • <p v-colors:slow.underline=”[‘blue’]”>q</p>
  • life-cycle
    • called on mounted and updated by default
    • explicitly define mounted, unmounted to have control over resources and not leak them
  • real world directives from vue libraries
    • vuetify