Quick Getting Started with Vue.js

May 03, 2019
Article · 6 min
1299 words

Like (0)
Favorite (0)

Vue.js is an open-source and progressive JavaScript framework. We can easily integrate Vue.js in any existing project. We can use Vue in two ways. We can use using Vue CDN and another is Vue CLI. CLI stands for Command Line Interface. For the big project, Vue CLI is better. For a small project, we can start with Vue CDN.

Today we are going to start with Vue CDN. We will talk about Vue CLI later. So, let’s start.

Table of Contents

Integrate Vue CDN
Print Hello Vue!
Binding Data
Two-Way Binding
If Else
Loop Binding
Event Handling

Step 1 : Integrate Vue CDN

It’s very easy to integrate Vue CDN in any project. We know how to use Bootstrap, jQuery CDN. Like those, we need to do the same thing. Here’s the CDN link:

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

Step 2 : Print Hello Vue!

Make a project and navigate to the project folder. Then create a file named “index.html“. Open the file using an editor and paste this code:

index.html

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
var myObject = new Vue({
  el: '#app',
  data: {message: 'Hello Vue!'}
})
</script>

</body>
</html>

In the example, we have created a Vue object called myObject. The el: property binds Vue object to the HTML element with ID. Here we bind with div id=”app”. Vue.js uses double braces {{ }} to print data.

Step 3 : Binding Data

After binding data when the Vue object changes, the HTML element will change.

<div id="app">
{{ message }}
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "Hello MyNotePaper!";
}
</script>

See the Pen Vue.js Binding by Md. Obydullah (@obydul) on CodePen.

Step 4 : Two-Way Binding

The v-model directive creates two-way data bindings on form input, textarea, and select elements.

<div id="app">
  <p><input v-model="message" placeholder="Edit me"></p>
  <p>Message is:<br/>{{ message }}</p>
</div>

<script>
myObject = new Vue({
  el: '#app',
  data: {message: 'Welcome to MyNotepaper..!'}
})
</script>

See the Pen QPeoxO by Md. Obydullah (@obydul) on CodePen.

Step 5 : If Else

The directive v-if, v-else-if and v-else are used to conditionally render a block.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

See the Pen Vue.js if else by Md. Obydullah (@obydul) on CodePen.

Step 6 : Loop Binding

The v-for directive binds an array of Vue objects to an “array” of HTML element:

<div id="app">
 <ul>
   <li v-for="todo in todos">
   {{ todo.text }}
   </li>
  </ul>
</div>

<script>
myObject = new Vue({
    el: '#app',
    data: {
    todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue.js' },
        { text: 'Build Something Awesome' }
        ]
    }
})
</script>

See the Pen Vue.js Loop Binding by Md. Obydullah (@obydul) on CodePen.

Step 7 : Event Handling

The v-on directive listen to DOM events and run some JavaScript when they’re triggered.

<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
myObject = new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

See the Pen Vue.js Event Handling by Md. Obydullah (@obydul) on CodePen.

We have successfully integrated Vue.js to our project and tested some directives.

Now take a look at the Vue.js official documentation. You will find more directives.

I hope this article helps you to understand their documentation. ?

Vue.js

Md Obydullah

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.