Starting Out With Vue.js

Whats it All About?

Vue.js is defined as

  • Component Structure
  • Conditionals
  • Loops
  • Input

Vue Components

The first thing you will want to do when learning Vue is to get a grasp of the component structure. When you install Vue and run the vue create app-name command, you be presented with a main App.vue page that looks like this:

The default App.vue file when running create vue app-name

Conditionals

If you are familiar with JavaScript you either write conditionals with the if, else if syntax or with the switch statement. Vue handles them just a little bit differently. For example, if we want to conditionally render a piece of data or HTML tag, we can simply add the v-if directive to bind data to the DOM. (That is one thing to note, that when beginning Vue, directives will be prefixed HTML attributes that can act like functions or manipulates the DOM element in some way)

Renders the h1 tag only while appear is set to true

Loops

Perhaps the most common method preformed in any type of programming is the ability to loop through data. In Vue.js, we use a directive called v-for. Here I have demonstrated how we can loop through an array of strings, and display them in li tags.

Note that by default Vue does not add bullets to unordered lists

Input

Handling input is one of the most common tasks in any responsive web application. Vue doe this in an interesting way, with something called v-model. V-model is a directive that allows for two-way binding between a form input and the applications state.

inputMessage variable is initialized as an empty string but updates on input

A Long Way To Go

Admittedly, I just began learning Vue.js very recently. However, had someone pointed out these simple concepts to me a week ago, it would have made my life that much easier. I hope this beginners crash course to the Vue.js basics has given you some insight on how to get started building your first Vue.js application. And of course, the best way to learn more about anything, is to try it for yourself!

Resources:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aidan McBride

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer