VueJS Getting Started

Let's get started with VueJS!

by squarified

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="exercise">
  <!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
  <div>
    <button @click="startEffect">Start Effect</button>
    <div id="effect" :class="currentEffect"></div>
  </div>
  <!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
  <div :class="[hannes, pannes, pepparrot]">I got no class :(</div>
</div>

CSS

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

.hannes {
	background-color: green;
}

.pannes {
	border: 1px solid white;
}

.pepparrot {
	width: 100px;
  height: 100px;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
	  currentEffect: 'shrink'
	},
  methods: {
    startEffect: function() {
		  let that = this;
			setInterval(function() {
			  console.log('Hannes');
			  that.currentEffect = that.currentEffect === 'highlight' ?
				  'shrink' : 'highlight';
			}, 2000);
    }
  }
});