Basics concepts to start working with Vue.
<script>, <template> and <style> data contents. In order to distinguish them:|
v-if / v-else-if / v-else
|
Condition
|
<section v-show=’var == true’>show me</section>
|
|
v-show
|
Condition (no alternative)
|
<section v-if=’var == true’>show me</section>
|
|
v-for
|
Loop (iterate dataStore elt)
|
<li v-for=’elt in dataStoreElt’>...</li>
|
|
v-on:event (@event)
|
Event listener
|
<button v-on:click=’function’>Click!</button>
|
|
v-bind:elt (:elt)
|
Bind
|
<li v-bind:href=’dataStoreElt.prop’>...</li>
|
|
v-model
|
Bind forms
|
<input type=’text’ v-model=’dataStoreElt’ />
|
|
Parent /
|
Child /
|
|
import Child from ‘./url’
components : {Child} <Child url= ’/contact ‘> |
props : [‘url’] or props : {url : ‘url’}
<a :href= ’url’> |
|
Parent /
|
Child /
|
|
import Child from ‘./url’
components : {Child} <Child v-slot:slotName >anything to replace default content </Child> |
<button> <span>fixed data</span> <slot name=’slotName’>default free content </slot>{{nl]] </button> |
|
Parent /
|
Child /
|
|
import Child from ‘./url’
components : {Child} data() { return{ msg : ‘’ } } methods : { setMsg(event) { this.msg = event.msg } } <Child @event-perso = ’setMsg’ /> |
methods : { eventPerso(){ this.$emit(‘event-perso’,{msg : ‘hello’}) } }
<button @click = ‘eventPerso’> |
|
Install:
vue add router // App.vue wil be erased! |
|
route = { path:'/', name: 'Name', component: ImportedName OR () => import('../path/Component') }
|
|
<router-view /> - Display point
|
|
<router-link to='/path'></router-link> - Link using routes (no reload page)
|
|
beforeCreate()/created() beforeMount()/mounted() beforeDestroy()/destroyed()
|
|
Function used in export default {...} to define the moment some operations must be ignitiated.
|
|
State (dataStore)
|
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: { ...mapState(['var1','var2']) } * |
|
Getters (computed)
|
Path: $store.getters
pluggin: { mapGetters } - use spread operator ... |
|
Pluggin must be used in computed
|
Vuex store/ getters: { setDate(state) { return
${state.day}:${state.month}:${state.year} } Component/ direct/ computed : { date() {this.$store.getters(‘setDate’)} } pluggin/ import { mapGetters } from ‘vuex’ computed : {...mapGetters([‘setDate’]) } |
|
Mutations (change State)
|
Path: - no access from components -
Pluggin: - none - |
|
Isolated from components
CAPITALIZED_NAME args: state, payload |
Vuex store/ state: { count: 0 }
mutations: { INCREASE_COUNT(state, amount) {state.count += Number(amount)} } |
|
Actions (commit changes to State)
|
Path: $store.dispatch
Pluggin: { mapActions } - use spread operator ... |
|
Pluggin must be used in methods
Apply mutators to State args: context, payload |
Vuex store/ actions: { updateCount(context,amount) {context.commit(‘INCREASE_COUNT’, amount)} }
Component/ direct/ methods: { update() {this.$store.dispatch('updateCount')} } pluggin/ import { mapActions } from 'vuex' methods: { ...mapActions(['updateCount']) } |
I'd like to put background color to my cells but can't find a way...
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.