VueJS QuickStart

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.

<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.

<div id="app"></div>

Then, add another script tag, where your JavaScript code will be. We’ll create an app variable to setup Vue.

<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.

<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.

data: {
  displayMessage: false
}

<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:

data: {
  fruitNames: ["Apple", "Pear", "Banana"]
}

You can create an HTML list of that array very easily using Vue:

<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:

<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:

<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:

data: {
  recipient: "John"
}

<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:

<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:

data {
  name: 'John'
}

<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.