Thursday, August 2, 2018

View with VueJs

Introduction

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. 
https://vuejs.org/

We are going to build a simple ToDo app. (code in self explanatory)

Code is at https://github.com/slmanju/vuetime/tree/lesson-00

Set up

 # Install cli  
 $ npm install --global vue-cli  
 # create a new project using the "webpack" template  
 $ vue init webpack demo-app  
 # Install dependencies  
 $ cd demo-app $ npm install  
 # Start the application  
 $ npm run dev  

Update HelloWorld.vue,
Go to the browser to see the chagnes.
http://localhost:8080/

Let's delete HelloWorld.vue file and update the App.vue as follow,

In components folder create our Todo.vue and TodoList.vue components. Update the App.vue to use our new components.

You can see new changes in the browser.
So far we have hard coded our todos. We can pass dynamic data and use v-for directive to loop over those.

     <div v-for="todo in todos" v-bind:key="todo.id" class="box">  
       <div>{{ todo.title }}</div>  
       <div>{{ todo.description }}</div>  
     </div>  

Passing data from parent to child
We can pass our data from the parent component. To do that we can use props in our child component and bind the property in the parent.

Add a todo

Let's modify our Todo.vue to add a todo with a title and a description. We can use @click (short for v-on:click) to call the save method.
 <button @click="save">Add</button>  

Send data to the parent
We can use $emit to send data to the parent from child with a name. In parent listen to the emitted event using v-on:
       save() {  
         this.$emit('save-todo', {  
           title: this.title,  
           description: this.description  
         });  
         this.title = '';  
         this.description = '';  
       }  

Listen to the event
 <todo v-on:save-todo="save"></todo>  

Full code is at https://github.com/slmanju/vuetime/tree/lesson-00

Thanks!!!