PlainTV - 001 Vue First Component

by Quique Fdez Guerra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div class="app">
  <first-component></first-component>
</div>

<div class="app2">
  <first-component name="JuanCarlos"></first-component>
</div>

CSS

body, html { font-family: Helvetica, Arial, sans-serif; padding: 5%; } div { margin: 2vw; }

JavaScript

Vue.component('first-component', {
   props: {
   	name: {type: String, default: 'Quique'}
   },
   data: () => ({
   	list: [1,2,3,4,5],
    quique: {
    a: 1
    }
   }),
   methods: {
   	hola() {
    	alert(8)
    }
   },
   template: `<div>
   	<li v-for="item in list">{{item}}</li>
    {{name}}
    <span @click="hola()" person1.sync="quique" person2.sync="carlos">Hola</span>
    
    <mycomponent v-model="quique"> </mycomponent>
    <mycomponent v-model="quique" date="9"> 
    	<div name="nombreslot" slot-scope="quique">
      	<span>{{quique.b.name}}</span>
      </div>
    </mycomponent>
    
    
    
    ////////////////
    <div class="componente-custom">
    	<slot :a="input"  :b="input" template="nombreslot"/>
     </div>

   </div>`
});

new Vue({
  el: '.app'
});

new Vue({
  el: '.app2'
});