Starting Out With Vue.js
If you are familiar with any front end library, you’ll know that they can be a great tool to build out an application. However, the question of which one to learn often pops up. Personally I have much more experience with React, but recently I was presented the opportunity to teach myself Vue for a code challenge. This blog will outline what I believe are the important things to know when starting to learn Vue, and some of the key differences between Vue and React.
This blog won’t cover installation or go super in depth on the capabilities of Vue.js. It will, however, be a great starting point for someone who has never used Vue before. This blog is designed to save you the time and effort I spent by introducing you to a few key concepts.
Whats it All About?
Vue.js is defined as
“a progressive framework for building user interfaces.”
That sounds nice, but what does that mean exactly? Well to break it down, a framework could also be a called a platform, used to develop software, written in a specific language to provide generic functionality. In this sense, we can think of Vue as a JavaScript framework, or a bunch of prewritten code, templates, and rules, that help us build out the front end of our application easier and by a uniform set of rules.
There are, however, a few things that are different about Vue, especially if you are coming from a React or plain JavaScript background. I will cover today:
- 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:
Let’s break this down a bit. The template tags at the top indicate what components will be rendered, in this case just a div tag, an image tag, and an entire HelloWorld component that was pre-made when we ran the command to create this application. You should note that all content or components inside the template must be inside an external tag, in this case the div tag with the app id.
Next we see the script where we are importing a component HelloWorld from the components folder. Much like in React, we export default, and here we name our component, and list the components that exist within it, in this case HelloWorld. Within the script is where we put any JavaScript code: where we write or methods, return our data, and define props.
Finally at lines 19 to 28 you can see we have our style tag. This is simply CSS that will only be applied to this specific component. In Vue, it is possible to style each component this way and avoid the need for a separate styles page. This is the basic breakdown of a Vue component, and it will save you some time learning Vue to know this already.
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)
I have edited the HelloWorld component to demonstrate conditional rendering with the v-if directive. In the example below, v-if binds the data attribute “appear” to the DOM and the h1 element. If we were to change the value of appear to false instead of true, the message “Welcome to Your Vue.js App” would no longer appear in our browser.
Here we can see a few things about Vue. First, we see on line 16 that our props object has a key called msg that is a string. If you refer to the App.vue page posted earlier, you will see that we are passing and defining a prop called msg that is equal to “Welcome to Your Vue.js App” (line 4).
Additionally, we can see that the data for the component is a function that returns an object. Here we define the variable appear and initialize it with the value true. This data function can be seen as similar to state in React, if that makes it easier to understand.
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.
To break this code down, we can see that on line 3, we are referencing a single “song” in the “songs” array, then with double brackets {{}} we are displaying that sone in an li element.
In recent updates of Vue.js, you have to add a key binding when using a v-for loop in order for it to work. This helps Vue track each node’s identity when iterating. Using the item’s id, in this case “song.id”, is an easy way to bind a key to you v-for directive.
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.
To bind an input to state, all we need to do is add the v-model directive and set it equal to the data we want to bind. In the example below, the inputMessage is bound to the input and DOM, so whenever a user enters text in the input, it is rendered within the h1 tag on line 3.
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!
