Learning Vue.js Part 2

javascript
frontend
coding
Published

February 22, 2021

Motivation

Learning frontend is a superpower. Even Eugene Yan wrote in his blog post How to win a Data Hackathon in conclusion:

Training bespoke machine learning models wasn’t a differentiating factor at this hackathon. Instead, what made a difference was:

- Using readily available data via public datasets or APIs
- Using libraries / pre-trained models to speed up ML iteration
- Building UIs to make machine learning and insights easy to consume
- Deploying models and UIs so people can use them

image

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

Vue.js getting started guide

Last week we started by picking out a few basics of Javascript. I also recommended it would be a good idea to read Vue getting started guide.

Let’s first look at Vue getting started guide:

Follow this link

The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. If you have read the getting started guide, you may have realised the following features:

  1. Declarative render - the property of adding data elements
  2. Then conditional statements using v-if and v-else
  3. v-for for declaring all elements in the todo list
  4. v-model to handle two-way input
  5. Functions to call on click which can return the necessary functions as appropriately
  6. Using components and using bind statements and passing prop
  7. Vue components are similar to web components and are inspired and modelled with Slot API

The above points are a brief gist of the basic getting started guide about Vue.js. We made a small todo list with the above getting started guide:

TODO list - based on Vue.js

TODO list Code pen

If you look at the source code inside