JS Frameworks

What and Why?

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></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 
    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>

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;
    }
  }
});