paramsinghvc

let app = new Vue({
  el: '#data-binding',
  data: {
    error: true,
    message: 'Survival of the fittest'
  }
})

paramsinghvc

article#data-binding
  section.message {{message}}
  p.error-text(v-if="error") {{error}}

paramsinghvc

article#loop
  ul
    li(v-for="band of bands") 
      | {{band.name}}
      p.genres
        span(v-for="genre of band.genres") {{genre}}

paramsinghvc

new Vue({
  el: '#loop',
  data: {
     bands: [
       { name: `Odesza`, genres: [`ElectroPop`, `Chillwave`, `Indietronica`, `Future Bass`] },
       { name: `Daft Punk`, genres: [`French House`, `Disco`] },
       { name: `Skrillex`, genres: [`Dubstep`, `EDM`, `Electro House`] },
       { name: `Chainsmokers`, genres: [`ElectroPop`, `EDM`, `Pop`] }
     ]
  }

paramsinghvc

#events
  p {{message}}
  button(v-on:click="reverseMessage") Reverse Message

paramsinghvc

#events
  p {{message}}
  button(@click="reverseMessage") Reverse Message

paramsinghvc

new Vue({
  el: '#events',
  data: {
    message: 'Hola Mundo'
  },
  methods: {
    reverseMessage(e) {
      this.message = this.message.split('').reverse().join('')
    }
  }

paramsinghvc

div(v-bind:id="'list-' + id")
// or
div(:id="'list-' + id")

paramsinghvc

<template lang="pug">
	.modal-overlay('@click'="closeDialog", ref="modalOverlay")
		.o-modal(@click="(e) => e.stopPropagation()", ref="modal")
			#carousel-content.owl-carousel.owl-theme(ref="carousel")
				img.img-content('v-for'="photo of project.photos" :src="'/static/img/projects/' + photo", alt='img')
			.project-info
				h2 {{project.name}}
				p.desc {{project.longDesc}}	
				ul.tags-holder
					li.o-tag('v-for'="tag of project.tags") {{tag}}

paramsinghvc

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {