Simple vue example

by Gonzalo Guevara

HTML

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

<div id="app">
  <h3>{{ title }}</h3>
  <input type="text" v-model="newdato">
  <ul>
    <li v-for="cosa in cosas" v-on:click="showContent(cosa)" > {{ cosa }}</li>
  </ul>
  <button v-on:click="addDato">Boton</button>
  <lista-comp :cosasprop="cosas"></lista-comp>
  <image-counter  v-for="img in images" :imagedata="img"
    v-on:pasodiez="notificarCounter"
  ></image-counter>
</div>

<template id="compo">
  <div class="wrap"><h1>{{ heading }}</h1>
  	<div>cosas por dos</div>
    <ul>
      <li v-for="cosa in cosasprop">{{ cosa * 2 }}</li>
    </ul>
  </div>
</template>

<template id="temp-image">
  <div>
  <div v-if="counter !=0 ">{{ counter}}</div>
  
    <img :src="imagedata.url" :alt="imagedata.title" v-on:click="clicksuma">
  </div>
</template>

CSS

.red {
  background: red;
}

.blue {
  background: blue;
}

JavaScript

Vue.component('lista-comp', {
	template: '#compo',
  props: ['cosasprop'],
  data:
  	function(){
      return { heading: 'Componente hijo' }
  },
  methods: {
  	
  }
});

Vue.component('image-counter', {
	template: '#temp-image',
  props: ['imagedata'],
	data: function(){
  	return {
    	counter: 0
    }
  },
  methods: {
  	clicksuma: function(){
    	this.counter ++;
      if(this.counter > 10){
      	this.$emit('pasodiez', {imagendata: this.imagedata, conteo: this.counter});
      }
    }
  }
});



new Vue({
	el: '#app',
  data: {
  	title: 'Lorem ipsum..',
    cosas: [0,1,2],
    newdato: '',
    images: [
    	{ title: 'Tile', url: 'http://lorempixel.com/400/200'},
      { title: 'Tile 2', url: 'http://lorempixel.com/400/200'}
    ]
  },
  methods: {
  	showContent: function(dato){
    	alert(dato)
    },
    addDato: function(){
    	this.cosas.push(this.newdato);
      this.newdato = '';
    },
    notificarCounter: function(data){
    console.log(data);
    	alert(data.imagendata.title + " " + data.imagendata.url + " el conteo es de " + data.conteo);
    }
  }
});