Vue.js Basics

Get started with Vue.js

by gsmargolis

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="text" v-model="userHobby">
  <button v-on:click="addHobby">New Hobby</button>
  <p v-if="hobbyWasDeleted">Hobby was deleted!</p>
  <p w
    v-bind:style="{color: hobbies.length > 3 ? 'red' : 'black'}"
    v-bind:class="{'multiple-hobbies': hobbies.length > 3}">Hobbies: {{ hobbies.length }}</p>
  <ul>
    <app-hobby 
      v-for="hby in hobbies"
      v-bind:hobby="hby"
      v-on:hobbyremoved="removeHobby($event)"
      ></app-hobby>
  </ul>
</div>

<!-- 
  1) Create a <div> and take control with a Vue Instance
  2) Output an array of hobbies in this <div> (provide some default hobbies)
  3) Add a 'New Hobby' button + <input> field where you add the hobby the user entered to the list
  4) Make the hobbies clickable to remove them once clicked
  5) Add a <p>Hobby deleted!</p> which is only shown once at least one hobby was deleted (be creative on how to track this!)
  6) Add a hobby counter (<p>Hobbies: ...</p>) above the list of hobbies
  7) Dynamically style/ add classes to the hobby counter, depending on whether you have more or less than 3 hobbies
  8) Outsource your hobbies (the <li> elements) into a re-usable component
-->

CSS

.multiple-hobbies {
  border: 1px solid red;
}

JavaScript

Vue.component('app-hobby', {
	props: ['hobby'],
  template: '<li v-on:click="removeHobby">{{ hobby }}</li>',
  methods: {
  	removeHobby: function() {
    	this.$emit('hobbyremoved', this.hobby);
    }
  }
});

new Vue({
	el: '#app',
  data: {
  	hobbies: ['Sports', 'Cooking'],
    userHobby: '',
    hobbyWasDeleted: false
  },
  methods: {
  	addHobby: function() {
    	this.hobbies.push(this.userHobby);
    },
    removeHobby: function(hobby) {
    	var position = this.hobbies.indexOf(hobby);
      this.hobbies.splice(position, 1);
      this.hobbyWasDeleted = true;
    }
  }
});