Getting started with Vue.js 2.0 building a simple Todo list app
Am very happy to write about Vue.js because is awesome, Thanks to Evan You who founded vue in 2014 but vue 2 .0 came out in 2016 . So what is vue.js?.
Vue.js is a progressive Javascript framework, for build modern web app that are reactive,declarative and component base.Vue JS is know-as, approachable, versatile and performant framework which means. One, is very easy to learn as long you know HTML, CSS and JS, it can be used easily in exiting project or new project and also the core of Vue is 19kb min+gzip, With runtime blazing virtual DOM.
There are different ways to use vue.js in your project either by using CDN(‘content delivery network’), npm(node package manger) or Vue-cli, But today we would be using CDN. Go to the folder where you want your app to be and create a file called “vueTut.html” and add this code inside.
We created a boilerplate with two scripts tags inside it, which the first one is for the CDN and the second for our JS . Let do a simple hello word app 😀, at least to test if the setup is Ok.
i know you would be asking yourself i taught this guy said is going to be easy so what is this?. Yup just calm down and let me explain what just happened, first we added a div tag with an id of app so our Vue app would live inside it,then we enter the script tag then made an instance of Vue js which take an object as the parameter and have two keys which are instruction for Vue to follow the “el” key stands for the element you want your app to live in your template and the “data” keys to your app model that has a message that would display, before i forget vue uses the MVVM pattern which stand for model view ViewModel pattern where your template is the View,your data is the model while the Vue app is the VM. Back to the app we printed the message of the model to the view in a reactive way with interpolation.so now you can open the file in your browser.
woo hoo it worked !
so what happened behind the screen,the data is reactive so when you change the message in your browser console you would notice that it would change also in your browser because vue is reactive.
Now we can start our Todos app so we can keep list of our todos.
first let update our code so we can add more data to our model and then display it to your browser
we change the data in the vue by adding a message and an array of object as a lists for Todos then inside the view layer we first printed the title and then added an unorder list that loop through the lists item using a loop directive in vue any template properties that start with v- is a directive and we have the v-if,v-bind,v-model,v-show,v-text,v-html,v-on and more. But this are popular ones.then our output is
we can’t leave our todo list app like this we have to add an input field to be able to add item to it, so update your file by adding this code to it .
wow we did a lot here so let break them down into small bits, First we added an input field then add two ways binding with the v-model directive that why when you are typing you see what you are typing showing “adding ….{{input}}” which is bind with the “newItem”data ,then we added an event listener to the input field, with the v-on directive that listen for keyup event on the enter button that call the addItem functionality in the methods(use for adding biz functionality to your app) and finally add a button that has add event listener with a shortcut for v-on (‘@event’)which also have a modifier that call preventDefaut(‘stop the browser from reloading’), then we get this result.
finally we are done with a simple todo list app.Thanks for reading.