VueJS QuickStart
Tags: vue, javascript, html, css
Published: 2021-01-04 09:52:13

VueJS is a JavaScript framework mainly used to create user interfaces and single-page applications.
It lets you add logic to HTML code, and lets you easily link JavaScript data with HTML content.
We’ll see in this tutorial the main features in order for you to get started building cool web apps.
If you're discovering Vue for the first time, I encourage you to try out the examples presented in this article. The only way to learn is by practicing for yourself!

# Set up the project
To include Vue in your project, simply add the following script tag in the head section of your document.
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
```

Then add a `div` with the id of `app` in the body section, that will contain your entire web application.
```html
<div id="app"></div>
```

Then, add another script tag, where your JavaScript code will be. We’ll create an `app` variable to setup Vue.
```html
<script>
const app = new Vue({
  el: '#app', // refers to container div
  data: {
    message: 'Hello World!' // just some example data
  }
})
</script>
```
Any data you want to use with Vue has to be in the `data` object, like the `message` property of value `'Hello Vue!'`.

And that’s it to setup Vue! We'll now look at the key features of Vue. Remember that Vue can only be used in the element you specified, which in my case is the `div` with the `app` id.

## Including variables in HTML
The following code snippet will add the value of the `message` variable in the `div`. If the value changes, the HTML is automatically updated.
```html
<h1>{{ message }}</h1>
```
To update the `message` variable, you have to refer to it as `app.message`, as it is a property of the `app` object.

## Conditions in HTML
To render HTML if a certain condition is met, you can use the `v-if` directive.
```javascript
data: {
  displayMessage: false
}
```
```html
<h1 v-if="displayMessage">This message will only be shown if displayMessage is true!</h1>
```

## For loops in HTML
Let's say you have a `fruitNames` array, like so:
```javascript
data: {
  fruitNames: ["Apple", "Pear", "Banana"]
}
```
You can create an HTML list of that array very easily using Vue:
```html
<ul>
  <li v-for="fruit in fruitNames">{{ fruit }}</li>
</ul>
```
That code will output the following HTML list:
- Apple
- Pear
- Banana

And again, if the array is modified, the HTML list will update accordingly.

You can also access the index in a Vue for loop, like so:
```html
<ul>
  <li v-for="(fruit, index) in fruitNames">{{ index }}: {{ fruit }}</li>
</ul>
```
The code above will output this list:
- 0: Apple
- 1: Pear
- 2: Banana

Furthermore, you can loop over a number range, like so:
```html
<ul>
  <li v-for="i in 5">{{ index }}</li>
</ul>
```
This example will produce this list:
- 1
- 2
- 3
- 4
- 5

## Binding HTML attributes
Just like you can bind text inside HTML elements to JavaScript variables, you can bind attributes of HTML elements to use variables.
Here’s an example. Let’s say you have an `<input>` for a chat app, and want to bind its placeholder attribute to the name of the recipient. Here’s how you would do it using Vue:
```javascript
data: {
  recipient: "John"
}
```
```html
<input v-bind:placeholder="'Send a message to' + recipient">
```
If `recipient` changes, the input’s placeholder will update!
The best part is that you can do this for any HTML attribute, like `title` or `class`.
And because `v-bind` is one of the most used Vue directives, it can be shortened to a single `:`. Which means it would be `:placeholder` instead of `v-bind:placeholder` in the example above.

### Exception with `v-on`
To bind `"on"` HTML attributes, such as `onclick` or `onchange`, you shouldn't use the `v-bind` directive, instead the `v-on` directive, like so:
```html
<button v-for="i in 10" v-on:click="doSomeStuff(i)">{{i}}</button>
```
This example will create 10 buttons, and each one will call `doSomeStuff` with their index passed as parameter.

Again, `v-on` is a very commonly used directive, so it has it's own shorthand: `@click` is the same as `v-on:click`.

## Input binding
When programming webpages, you'll often find yourself wanting to bind the value of an HTML input, with a JavaScript variable. Vue makes that super easy, with the `v-model` directive. Here's how you use it:
```javascript
data {
  name: 'John'
}
```
```html
<input v-model="name">
<p>{{name}}</p>
```
This example will initialize a `name` property with the default value of `'John'`, and then create an HTML input that will automatically change that property whenever the input is changed.

## Conclusion
As we have seen, Vue is truly a game-changer when it comes to connecting the HTML DOM with JavaScript, as it provides various logic elements to HTML. Problems such as conditional rendering and state management is easily solved when using Vue.