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:  "[e-mail]"
         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 ...