Skip to main content

Posts

Showing posts from August, 2018

View with VueJs

IntroductionVue (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&q…