Pre-Vue — An Introduction to Vue.js

After spending most of my still relatively short coding journey learning and working with React, I’ve recently started exploring a new JavaScript framework for the first time. While there are other options, I decided to give Vue.js a go. I chose Vue for a number of reasons, including its relatively easy learning curve, its supposed elegance, and of course, its rising popularity with amongst devs. So over the course of the next couple months I’ll be blogging regularly about the basics of this up and coming framework.

To start off, let’s look at the basic set up of a VERY simple Vue application. Much like React components, Vue components contain a combination of HTML and Javascript (in our case a Vue instance) that work together to render an output.

Above, we see that the Vue instance is linked to the HTML by the ID of “app”. Also, we can not that there’s a data object in the Vue instance that stores information which we can use in the HTML. This value is simply referenced by using double curly brackets syntax with the key of the key value pair in the data object (title). Conveniently, we have access to everything in the data object with this super clean syntax. No need to type ‘this.title’, or ‘data.title’, just put the element you want in the curly brackets, and voila!

What’s particularly cool about how Vue.js works here is that it doesn’t actually add these commands to the HTML code, it just creates a new template based on the HTML in the component, so no runtime gets added!

For proof of this, if we inspect our output of “Hello World!” in the DOM, we see the following…

It’s just “Hello World!” inside of p tags. No curly braces or anything! That’s because Vue creates a template based on our typed HTML code, stores that internally, then uses that stored template to create the real HTML code that is used for out output.

Now let’s quickly take a look at how Vue displays outputs from methods rather simply displaying data stored in our Vue instance.

To incorporate methods, we first need to create a methods object below the the data object that stores an ultra simple function, ‘sayHello’.

To call the output of this function in our HTML, we once again use the curly brackets syntax and type in the name of our function. This will then display the expected output of ‘Hello!’. However, this only works when the output of our function in the Vue instance is something that can be converted to a string. So complex objects and null values won’t work like this.

For now, let’s stop there. Of course this only touches on the most basic Vue functionality, but it should give you a good general idea of how Vue.js code interacts with HTML in a super clean and intuitive way to create what we see on our page!

--

--

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