Table of Contents for

Vue.js in Action

 

Cheat sheet

Component information

Vue.component('my-component',  {
   props:  {     The parameters the component accepts
      myMessage:  String,
      product:   Object,
      email:  {
         type:  String,
         required:  true,
         default:  "test@test.com"
         validator:  function  (value)  {
            Return true or false
         }
      }
   },
   data:  function()  {      Must be a function
      return  {
         firstName:  'Vue' ,
         lastName:  'Info'
      }
   },
   methods:  {  ...  }
   computed:  (       Return values cached until
      fullName:  function  ()  { dependencies change
         return  this.firstName  +  '  '  +  this.lastName
      }
   }
   watch:  {        Called when firstName changes value
      firstName:  function  (value,  oldValue)  {  ..  }
   },
   components:  { components that can be used in the template
      ButtonComponent,  IconComponent
   },
   template:  ' <span>{{  myMessage  }}</span>',
})            Can also use backticks for multiline

Custom events

Use props to pass data into child components and use custom events to pass data to parent elements.

Set listener on component, within its parent:

<button-counter  v-on:incrementThis="incVal">

Inside parent component:

methods:  (
   incVal:  function  (toAdd)  { . . . }
}

Inside button-counter:

Lifecycle hooks

beforeCreate     beforeUpdate
created          updated
beforeMount      beforeDestroy
mounted          destroyed

Using a single slot

Component template:

<div>
   <h2>I'm a title</h2>
      <slot>
         //Only displayed if no content
      </slot>
   </div>

Use of component with data for slot:

<my-component>
   <p>This will go in the slot</p>
</my-component>

Multiple slots

Component template:

<div  class="container">
   <header>
      <slot  name="header"></slot>
   </header>
   <main>
      <slot>Default content is here</slot>
   </main>
   <footer>
      <slot name="footer"></slot>
   </footer>
</div>

Use of component with data for slot:

<app-layout>
<h1  slot="header">Page title</h1>
<p>the main content.</p>
<p  slot="footer">Contact info</p>
</app-layout>