vue js tutorial

https://www.youtube.com/watch?v=4deVCNJq3qc

by Michael Lajlev

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="root">
  <input placeholder="Enter cat name" type="text" v-model="newCat" @keyup.enter="addCat">
  <button @click="addCat" :disabled="newCat.length < 3" >+ ADD CAT</button>
<small>
    <a href="https://google.com" v-on:click.prevent="addBobby">Add Bobby to list</a>
</small>

<h2>List of cats</h2>
  <cat-list :cats='cats'/>
</div>

CSS

.red {
  background: red;
}

.green {
  background: green;
}

Vue

Vue.component('cat-list', {
props: ['cats'],
template:`
	<ul>
  	<li v-for='cat in cats'>
    	{{cat.name | kittify }}
    </li>
  </ul>
`
})

app = new Vue({
  el:'#root',
  component: [
  'cat-list'
  ],
  data: {
		cats: [
      {name: 'Vilma'},
      {name: 'Bruno'},
      {name: 'Misser'}
    ],
    newCat: ''
	},
  methods: {
    addCat: function(){
      this.cats.push({name: this.newCat})
      this.newCat = ''
    },
    addBobby: function(){
	    this.cats.push({name: 'Bobby Olsen'})
    }
  },
  filters: {
    capitalize: function(value){
			return value.toUpperCase()
    },
    kittify: function(value){
    	return value.replace(/O/g, '😼')
    }
  }
})