Show Menu

Basics concepts to start working with Vue.

How to read these codes snippets

Vue components contain in the same place
<sc­rip­t>, <te­mpl­ate>
data contents. In order to distin­guish them:
Italic code is for script. Regular code is for template.


v-if / v-else-if / v-else
<se­ction v-show­=’var == true’>show me<­/se­cti­on>
Condition (no altern­ative)
<se­ction v-if=’var == true’>show me<­/se­cti­on>
Loop (iterate dataStore elt)
<li v-for=’elt in dataSt­ore­Elt­’>...<­/li>
v-on:event (@event)
Event listener
<button v-on:c­lic­k=’­fun­cti­on’­>Cl­ick­!</­but­ton>
v-bind:elt (:elt)
<li v-bind­:hr­ef=­’da­taS­tor­eEl­t.p­rop­’>...<­/li>
Bind forms
<input type=’­text’ v-mode­l=’­dat­aSt­oreElt’ />

Share data between parent­/child components

Direct data sharing between 2 linked components is possible in 3 ways: props & slot for parent commun­icating to child, and $emit for child commun­icating to parent.

props (Parent > Child)

Parent /
Child /
import Child from ‘./url’
components : {Child}

<Child url= ’­/co­nta­ct ­‘>
props : [‘url’] or props : {url : ‘url’}

<a  :href= ’url’>

slot (Parent > Child)

Parent /
Child /
import Child from ‘./url’
components : {Child}

<Child v-slot­:sl­otName >an­ything to replace default content </C­hil­d>

<button> <sp­an>­fixed data</span>
 ­ ­ ­<slot name=’­slo­tNa­me’­>de­fault free content </slot>{{nl]] </b­utt­on>
Slots are free areas that can be named to use more than one. Default content of slots set in child component can be replaced as needed.

$emit (Child > Parent)

Parent /
Child /
import Child from ‘./url’
components : {Child}
data() { return{ msg : ‘’ } }
methods : { setMsg­(event) { this.msg = event.msg } }

<Child @event­-perso = ’setMsg’ />
methods : { eventP­erso(){ this.$­emi­t(‘­eve­nt-­per­so’­,{msg : ‘hello’}) } }

<button @click = ‘event­Per­so’>


vue add router
// App.vue wil be erased!
route = { path:'/', name: 'Name', component: Import­edName OR () => import­('../p­ath­/Co­mpo­nent') }
<ro­ute­r-view /> - Display point
<ro­ute­r-link to='/p­ath­'><­/ro­ute­r-l­ink> - Link using routes (no reload page)


before­Cre­ate­()/­cre­ated() before­Mou­nt(­)/m­oun­ted() before­Des­tro­y()­/de­str­oyed()
Function used in export default {...} to define the moment some operations must be igniti­ated.

Vuex - General dataStore

State (dataS­tore)
Paths: $store.state
pluggin: { mapState } - use spread operator ...
Pluggin must be used in computed
* objects can be used in place of strings to rename variables
Vuex store/ state: {key: 'value'}
Component/ Import { mapState } from 'vuex'
computed: {­Sta­te(­['v­ar1­','­var2']) } *
Getters (computed)
Path: $­tters
pluggin: { mapGetters } - use spread operator ...
Pluggin must be used in computed
Vuex store/ getters: { setDat­e(s­tate) { return

direct/ computed : { date() {this.$­st­­tte­rs(­‘se­tDa­te’)} }
pluggin/ import { mapGetters } from ‘vuex’
computed : {­pGe­tte­rs(­[‘s­etD­ate’]) }
Mutations (change State)
Path: - no access from components -
Pluggin: - none -
Isolated from components
args: state, payload
Vuex store/ state: { count: 0 }
mutations: { INCREA­SE_­COU­NT(­state, amount) {state.count += Number­(am­ount)} }
Actions (commit changes to State)
Path: $store.di­spatch
Pluggin: { mapActions } - use spread operator ...
Pluggin must be used in methods
Apply mutators to State
args: context, payload
Vuex store/ actions: { update­Cou­nt(­con­tex­t,a­mount) {conte­xt.c­om­mit­(‘I­NCR­EAS­E_C­OUNT’, amount)} }
direct/ methods: { update() {this.$­st­ore.di­spa­tch­('u­pda­teC­ount')} }
pluggin/ import { mapActions } from 'vuex'
methods: {­Act­ion­s([­'up­dat­eCo­unt']) }
All data contained in this dataStore is accessible and changeable to any component.


I'd like to put background color to my cells but can't find a way...

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets