Vue JS | Pass data to child components

Hi, it’s some time that i try to understand wich framework JS learn’s.
Find an answer is not so easy, at the moment, there are a lot of good JS framework, such as “Angular JS”, “React JS” , ecc ecc.
I need a framework that have a low learning curve, because i need to put it in production fast.

A friends of mine, recommend me “Vue JS” a framework that was created by Evan You after working for Google using AngularJS in a number of projects.
The Vue JS web site sed that ” is a progressive framework for building user interfaces. “.

Let’s try it.

First of all add “vue js” from repository by adding in the header :

https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js

I want develop a basic application that alow to add a panel, by simply passing js data as Id, Title, Background-image, Icon, Content Text.

First, adds html markup:

<div id="firstComponent">

<!-- The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates.  -->
<!-- '  v-bind ' Dynamically bind one or more attributes, or a component prop to an expression. -->

       <card-item  v-bind:cards="cardsList" >
    </card-item>
</div>
</div>

Now let’s create the JS, open a new js file ( and connect to your main html / php file ), and add this code :

// Registers a new component called "card-item"
// It's connected to the component template ' <card-item  v-bind:cards="cardsList" > </card-item> ' in the html/php file.
// ( Row 00010 ) A prop is a custom attribute for passing information from parent components. A child component needs to explicitly declare the props it expects to receive using the props
// ( Row 00011 ) A templates is an HTML-based  syntax that allows you to declaratively bind the rendered DOM. Are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. 

Vue.component('card-item', {
  props: ['cards'],
   template: `
      <div id='todowrp' class='row'>
        <div class="column small-12 medium-4" v-for="item in cards" v-bind:key="item.id">
          <div class="card">
            <div class="top_bar" :style="{'background-image':'url('+item.url+')'}">
              <span class="card-title">{{item.title}}</span>
            </div>
            <div class="card_conts">
              <div class="circle">
                <i v-bind:class="[ item.icon ]+' fa'" aria-hidden="true"></i>
              </div>
                {{item.text}}
            </div>
          </div>
        </div>
      </div>`
})



var firstCompnenet = new Vue({
  el: '#firstComponent',
  data: {
    cardsList: [
      { id: 0, url: 'https://s1.favim.com/orig/150904/boy-camera-cold-hipster-Favim.com-3237650.jpg', title:'Editor Panel', text:'Last text', icon:'fa-pencil' },
      { id: 1,url: 'https://i.pinimg.com/originals/d4/6a/7e/d46a7eb0ff9652fe0eca4fd5c01a075a.jpg', title:'Mail Panel', text:'Last @mails', icon:'fa-envelope' },
      { id: 2, url: 'https://i.pinimg.com/originals/e1/8a/6c/e18a6c719012b2ae311fe71b327bab72.jpg', title:'Download Panel', text:'Last downloads', icon:'fa-download' }
    ]
  }
})

We can use the v-for directive to render a list of items based on an array, in our case cards is the source data array and item is an alias for the array element being iterated

<div class="column small-12 medium-4" v-for="item in cards" v-bind:key="item.id">

When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

var firstCompnenet = new Vue({
  el: '#firstComponent',
  data: {
})

This identify the element inside the dom wich is the container of our application.

  el: '#firstComponent',

cardsList, contain the data’s array.
For each element, we pass id, url, title, text and icon datas.

 cardsList: [
      { id: 0, url: 'https://s1.favim.com/orig/150904/boy-camera-cold-hipster-Favim.com-3237650.jpg', title:'Editor Panel', text:'Last text', icon:'fa-pencil' },
      { id: 1,url: 'https://i.pinimg.com/originals/d4/6a/7e/d46a7eb0ff9652fe0eca4fd5c01a075a.jpg', title:'Mail Panel', text:'Last @mails', icon:'fa-envelope' },
      { id: 2, url: 'https://i.pinimg.com/originals/e1/8a/6c/e18a6c719012b2ae311fe71b327bab72.jpg', title:'Download Panel', text:'Last downloads', icon:'fa-download' }
    ]

Here you find our end example. Try to add another row directly after

cardsList: [
{ id: 2, url: ‘https://i.pinimg.com/originals/e1/8a/6c/e18a6c719012b2ae311fe71b327bab72.jpg’, title:’Download Panel’, text:’Last downloads’, icon:’fa-download’ }
]
[/code]

You will see that a new card will be added.

See the Pen Vue JS | Pass data to child components by Pizzi (@Pizzi) on CodePen.0