Introduction to Vue

January 22nd, 2020 | By John Au-Yeung | 7 min read

What is Vue?

Vue is a progressive front-end framework that can be easily added to an existing app. We can also make a single-page app from it. This means we can use it to add new functionality to existing apps or to create new ones.

It's a component-based framework, meaning we build apps with Vue by nesting components and passing data between them.

Getting Started

Let's start with a script tag to add the Vue.js framework to our code.

There's a development version of the framework, which we can add by writing:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


The development version isn't minified. Thus, it shouldn't be used in production.

Add the production version by writing:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


Creating our First Vue App

We can begin by creating a project folder. Then, add an index.html and an index.js file to hold our HTML and JavaScript code, respectively.

Then, in index.js, we have to create a new Vue instance, which is the entry point for our Vue app.

To do this, we can write the following code in index.js:

new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});


In the code above, we create a new instance of Vue by passing in an object with various options.

The el property tells Vue to put our app inside a div element with the ID app.

The data property has the initial data, which we can use in templates.

Then, in index.html, we write the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <script src="index.js"></script>
  </body>
</html>


The HTML code above has the script tags for the Vue framework located at the top and another script tag for our code located at the bottom.

In the div element with the ID app, we added the double curly braces to display the string 'hello' from data.message in index.js.

The automatic updating of the template's data from the Vue instance is called data binding.

Data can also go from the template back to the Vue instance, as we will see later.

At this point, we should see the following on the screen when we load the browser:

Hello


In Vue.js, any valid JavaScript expression can be placed between the double curly braces.

Some examples of this are:

Example 1

{{ num + 1 }}


Example 2

{{ messages.reverse() }}


Conditional Rendering

We can conditionally render items on the screen by using the v-if directive. Directives are Vue codes we can apply to make an element do something.

For example, we can write the following code:

index.js:

new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});


index.html:

<p v-if="Math.random() > 0.5">
  {{message}}
</p>
<p v-else>
  No Message
</p>


Then, when we load the browser or refresh it, we see that Hello will be displayed sometimes since it's only displayed when Math.random() returns something bigger than 0.5.

The v-else directive is for displaying something if the condition in v-if is false. In the code above, if Math.random() returns some number less than 0.5, we will see No Message.

Accepting Inputs

A Vue app can take input via the v-model directive. This directive accepts a variable as the value.

The v-model gets the input and sets it to the data in the Vue instance. It'll also get the data from the Vue instance and display it on the template. We call this 2-way binding since the data is automatically set, and the data already set is also passed back to the template.

For example, if we have the following code:

index.js:

new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});

<input v-model="message" />
<p>{{message}}</p>


When the page loads, we see the word 'Hello' in the input element. This happens because the value of data.message is sent from the Vue instance to the input by the v-model directive.

Then, when we type something in the input, it'll be displayed in the p element below it. This is because the data typed into the input element is sent to the Vue instance that we created in index.js

The data we typed in is set in data.message in the object that we passed into the new Vue.

Handling Events

JavaScript events must be handled for the app to properly react when the user acts.

Vue makes this easy by providing the v-on directive. @ is shorthand for v-on. For example, v-on:click is the same as @click. To handle user click events, we can use v-on:click="onClick". This calls the onClick method in the object that we passed into the Vue instance when the user clicks whatever has this directive applied.

The click in v-on:click is called an argument. This is because we can replace click with other event names that we define or are built into the browser.

Using this knowledge, we can create a button that pops up a message as follows:

index.js:

new Vue({
  el: "#app",
  methods: {
    onClick() {
      alert("Hello");
    }
  }
});

<div id="app">
    <button v-on:click="onClick">Click Me</button>
</div>


When we click the Click Me button, our code calls the onClick method because we have v-on:click="onClick" in the template. Anything in the object can be called from the template.

Therefore, we should see an alert box that says 'Hello' pop up when we click the Click Me button.

Displaying Collections of Data

We can display collections of data easily with the v-for directive. It works with arrays and objects.

For example, it enables us to display items from an array as a list as follows:

index.js:

new Vue({
  el: "#app",
  data: {
    persons: [{ name: "Mary" }, { name: "Phil" }, { name: "Jane" }]
  }
});


index.html:

<div id="app">
    <ul>
        <li v-for="person of persons">{{person.name}}</li>
    </ul>
</div>


The code v-for="person of persons" will loop through the data.persons array in index.js and display all the items by getting each entry's name property and then displaying the item in a li element. This is because we added v-for="person of persons" in a li element.

Also, v-for="person of persons" and v-for="person in persons" are the same.

In the end, we should see:

Mary
Phil
Jane


We can also use v-for to display the key-value pairs of an object as follows:

index.js:

new Vue({
  el: "#app",
  data: {
    obj: {
      foo: "a",
      bar: "b",
      baz: "c"
    }
  }
});


index.html:

<div id="app">
    <ul>
        <li v-for="(value, name) in obj">{{name}} - {{value}}</li>
    </ul>
</div>


The key-value pairs from the data.obj are displayed in li elements:

So we get:

foo - a
bar - b
baz - c


Creating Components

Vue is useful because it lets us divide up our app into components.

To create a simple component, we can use the Vue. component method as follows:

index.js:

Vue.component("custom-input", {
  data() {
    return {
      message: "foo"
    };
  },
  methods: {
    submit() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <input v-model='message'>
      <p>{{message}}</p>
    </div>
  `
});
new Vue({
  el: "#app"
});


index.html:

<div id="app">
    <custom-input></custom-input>
</div>


In the code above, we created a component that's available everywhere by calling the Vue.component method with the name of the component as the first argument.

The second argument is the options object for creating the component. It's slightly different from what we have in the object that we passed in to create the Vue instance.

The data property is a function instead of an object. This way, the state won't be exposed to the outside.

Methods and templates are the same as the ones we set in the object that we use to create the Vue instance.

In index.html, we reference our custom-input component by writing:

<div id="app">
  <custom-input></custom-input>
</div>


Note that we can only reference components inside the element that we render our Vue app in. In this case, it would be the div with the ID app. We can also reference components in another component's template or recursively in its own template.

Conclusion

Vue is a component-based framework that we can use to create front-end apps in a clean and expressive way.

It has built-in directives for model binding, conditional rendering, and rendering list of items.

Hopefully, this tutorial has helped you quickly understand the basic aspects of Vue and motivated you to start building something unique.

Before deploying your commercial or enterprise Vue apps to production, make sure you are protecting their code against reverse engineering, abuse, and tampering.

Jscrambler

The leader in client-side Web security. With Jscrambler, JavaScript applications become self-defensive and capable of detecting and blocking client-side attacks like Magecart.

View All Articles

Must read next

Web Security Frameworks

How To Protect Your Vue.js Application With Jscrambler

In this post, we're going to walk through the steps to protect your Vue application with Jscrambler, by integrating it into your build process.

January 14, 2020 | By Jscrambler | 8 min read

Learn More
Web Development

Creating a Functional Component in Vue.JS

In this article, you will learn how to create functional components in Vue.js.

September 30, 2022 | By Jscrambler | 4 min read

Learn More
Section Divider