Create components in vue.js

Vue : is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Create Component in Vue.js


The easiest way to say hello to vue.js is using JSFIDDLE hello world example.


<input type="text" list="idOfDatalist" /> 
 <datalist id="idOfDatalist">
      <option value="element1" />
      <option value="element2" />
</datalist>

As you can see its composed of two elements, the datalist which containes the elements, and the input. isn’t a good example of use of component?

Template :

<template id="auto-complete">
 <input type="text" name="{{id}}" list="{{id}}" :style="styleObject" /> 
 <datalist id="{{id}}">
 <option v-for="framework in frameworks" value="{{framework}}" />
 </datalist>
</template>


In this we need to provide the id and the frameworks which is nothing but a an array.

Component:

Vue.component("auto-complete", {
    props : ['frameworks', 'id'],
    template : "#auto-complete",
})

the component method register a global compenent that can live outside the Vue Instance, we should provide its name and an object of options such as :

Template : which holds the id of the template that we declared before.

Props : its the list of options that will be used by the component, think of it as a box that holds the data sent by the outside world.

Now how to use it.

Declare a vue.js instance and provide a data to it.

new Vue({
 el: "#app",
data: {
    id: 'jsFrameworks',
    list: [
       'JQuery',
       'React',
       'VueJs',
       'AngularJs',
    ]
   }
})

And finally the component is :


<div id="app">
 <auto-complete :frameworks="list" :id="id"></auto-complete>
</div>

I Hope you like the post please comment and share.

No comments:

Post a Comment

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular