Getting Started With Vue.js
Tags: vue, javascript, frontend
Published: 2020-12-08 02:31:48

Designing things for the web nowadays requires that sites be interactive and react quickly. There have been many studies done about how users are likely to leave a site if it takes too long to load and update. That is where frontend software development comes in. And the most popular coding language to make a website immediately responsive is JavaScript. Because JavaScript has become so popular, there are now a large number of frameworks that make it easy to make your website interactive. Arguably the most popular one is React.js, and this is what I was taught to use in my bootcamp. But I decided it would be good to learn another one, at the very least to see what it is like to teach myself how to use a framework. So I decided to look into [Vue.js](https://vuejs.org/).

One thing I’d heard is that, since I know React, learning another framework isn’t as hard, since they all have similar concepts. From what I’ve seen, that is mostly true. Both React and Vue have a way to keep track of some sort of “state” that affects what is displayed on a webpage. Using this state, both React and Vue have ways to add things to html so you can cycle through a list and have html elements show up on the page for each thing in the list. They both have ways to make something only show up on a webpage depending on a condition. And they both have ways to make certain elements react to the events you specify.

In comparison to React, it is very easy to get started with adding Vue to a project, you just need to add the script that Vue provides in their guide to your HTML file:
```
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
```
Another comparison is that, in React, everything is written in JSX, which is a syntax extension to JavaScript that was created to be used with React. I personally like JSX, but it may be hard for some people to get a handle on, so Vue is better for beginners in this way as well. Vue doesn’t have its own syntax, it just uses HTML and JavaScript.

I taught myself about Vue through the [guide](https://vuejs.org/v2/guide/) they have on their website. Similar to React’s create-react-app, they have a way to scaffold a new project with all the structure you need for a full project with [vue-cli](https://cli.vuejs.org/). But to start out with learning Vue’s, I decided to test all of the concepts out using a very basic project with a simple structure. It just has three files: *index.html*, *index.js*, and *index.css* (the css file isn’t necessary, I just added it so I can style some things). The *index.html* file looks something like this:
<pre><code>
   &lt;html&gt;
     &lt;head&gt;
       &lt;link rel="stylesheet" href="index.css"&gt;
       <b>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&gt;
       &lt;/script&gt;</b>
     &lt;/head&gt;
     &lt;body&gt;
       . . .    
     &lt;script src="index.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
   &lt;/html&gt;

</code></pre>
You could also put all of your JavaScript in the `script` tag at the bottom of the `body` tag in your HTML file instead of linking the *index.js* file in, but I think this makes the HTML file to long and involved so I prefer to put all of the JavaScript in a separate *index.js* file. To see the *index.html* file in my browser, I just run this command in my terminal:
```
// ♥ > open index.html
```
The main thing you need to get started using Vue is the Vue instance. A basic example, using the classic “Hello, World!”, would look like this:
```
var hello = new Vue({
  el: '#hello',
  data: {
    message: 'Hello, World!'
  }
})
```
The `data` part of a Vue instance is an object with keys and values with data you want to use, and Vue will keep track of it as it changes. In a Vue instance, you can access anything in the data object directly from the instance, like this:
```
hello.message  // => "Hello, World!"
```
You use `el` to attach the instance to an HTML element, in this case something with an *id* of *hello*. This way, inside the HTML element you can just use `message` directly to reference it:
```
<div id="hello">
  {{ message }}
</div>
```
The double brackets are the way we link the data from the Vue instance to the DOM, so if you open the console and change `hello.message` to equal something else, you will immediately see the page update to include the new value.

But just being able to show some data from a Vue instance on the screen, and only being able to change it though the console isn’t very interesting. Vue gets a lot more useful when you start adding *directives* and add functions so you can interact with the data that appears on the screen. I’ll go into the basics of what Vue directives are, some of the ones that are available in Vue, and how to use them in my next blog post.