Monday, 12 December 2016

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.

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts