Frontend Masters - Vue

April 01, 2021

Working through Frontend Masters’ courses on Vue. I’ll be working through Intro to Vue 3, Building Applications with Vue & Nuxt, and Production-Grade Vue.js. Afterwards, there is elective coursework. Courses such as Vuex for Intermediate Vue.js Developers, and Advanced Vue.js Features from the Ground Up.

Intro to Vue 3

Directives, Modifiers, and Data Rendering:

v-model Directive

• creates relationship between data in form input and the data
• two-way data binding

<div id="app">
  <input v-model="message" placeholder="edit me">
  <p> {{ message }} </p>
</div>

v-if, v-else, v-show

• conditional rendering, based on requirements
• can be buttons, forms, divs, componenets

<div id="app">
  <h3>What is your favorite kind of taco?</h3>
  <textarea v-model="tacos"></textarea>
  <br>
  <button v-show="tacos" type="submit">Let us know!</button>
</div>

Once there’s some data in the field with v-model, we will mount the button that has v-if or v-show on it and vice-versa.

• v-if, on toggle, will mount/unmount

  • use for bigger components that you don’t want just sitting in the DOM

• v-show, on toggle, will display:none to keep it ready

  • use for components you’ll be conditionally rendering, back and forth, a lot because mounting & unmounting can be expensive in the DOM

• v-else & v-else-if

  • must be siblings with v-if

<div id="app">
  <p v-if="tacos === 'yes'">If yes, show this.</p>
  <p v-else-if="tacos === 'no">If no, show THIS.</p>
</div>

v-bind

• use v-bind or just :
• style binding
• create dynamic props

<div id="app">
  <h3>What is your favorite kind of taco?</h3>
  <textarea v-model="tacos"></textarea>

  <button :class="[tacos ? activeClass : '']">
  Let us know!
  </button>
</div>

• We toggle the button’s active classes by v-binding the state with a ternary operator

v-for

• classic loop
• add a key to allow the v-dom to track changes

<li v-for="num in 5" :key="num">

v-once

• won’t update once its rendered
• used for optimized update performance

v-pre

• print out inner text exactly how it is
• use for documentation

v-on OR @

• mean the same thing
• used to bind events
  • click events
  • mounseenter
  • ternarys

<div
  v-on="
  mousedown: doThis, 
  mouseup: doThat
"
></div>

Written by Christian Turner
Follow me on Twitter

• ← Javascript30
• Challenge →