VUE ESSENTIALS CHEAT SHEET

Vue JS sheet

EXPRESSIONS

    <div id="app">
    <p>I have a {{ product }}</p>
    <p>{{ product + 's' }}</p>
    <p>{{ isWorking ? 'YES' : 'NO' }}</p>
    <p>{{ product.getSalePrice() }}</p>
    </div>

DIRECTIVES
  #Element inserted/removed based on truthiness:

    <p v-if="inStock">{{ product }}</p>

    <p v-else-if="onSale">...</p>
    <p v-else>...</p>

  #Toggles the display: none CSS property:

    <p v-show="showProductDetails">...</p>

  #Two-way data binding:

  <input v-model="firstName" >
  
  v-model.lazy="..." #Syncs input after change event
  
  v-model.number="..." #Always returns a number

  v-model.trim="..." #Strips whitespace

LIST RENDERING

  <li v-for="item in items" :key="item.id">
  {{ item }}
  </li>