A beginner’s guide to Vue.JS

3 min readNov 7, 2023

Vue.js, often referred to simply as Vue, is a progressive JavaScript framework designed for creating user interfaces. It has gained popularity for its user-friendliness and flexibility, making it an excellent choice for developers, whether new or experienced. In this guide, we’ll introduce you to the fundamentals of Vue.js and help you get started with crafting interactive web applications.

Why Vue.JS?

Before delving into the technical aspects, it’s essential to understand the reasons behind Vue.js’s popularity:

Accessibility: Vue is intentionally built to be approachable. It caters to developers of all experience levels, allowing you to begin with the basics and gradually explore more advanced features.
Adaptability: Vue can be employed for a diverse range of projects, from small single-page applications to large, complex endeavors.
Extensive Documentation: Vue comes with comprehensive and well-organized documentation, making it straightforward to learn and comprehend.
Active Community: Vue boasts a vibrant and supportive community, offering numerous tutorials, resources, and forums to assist you on your learning journey.

Let’s start with the essentials.

Installation

To start using Vue.js, you can include it in your HTML file through a Content Delivery Network (CDN) link. Add the following script tag to the <head> section of your HTML file:

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

Alternatively, you can use npm or yarn to install Vue.js locally in your project:

npm install vue
# or
yarn add vue

Once you’ve included Vue.js, you can start building Vue-powered applications.

Creating Your First Vue Instance

The core of Vue.js is the Vue instance, which serves as the foundation of your application. You can establish a Vue instance using a straightforward script:

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

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

In this example, an HTML element with the id app is present. The Vue instance is constructed and associated with this element through the el property. The data property contains the variables you wish to display in your HTML. In this case, message holds the text 'Hello, Vue!'.

Vue embraces a declarative approach, enabling you to articulate your desired outcome, with Vue handling the underlying logic.

Data Binding

Vue offers two-way data binding, ensuring that alterations in your data are automatically reflected in the DOM, and vice versa. In the example above, any modifications to the message property will be updated quickly in the HTML.

<button @click="changeMessage">Change Message</button>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    methods: {
      changeMessage: function() {
        this.message = 'New Message'
      }
    }
  })
</script>

In this instance, we’ve included a button that triggers the changeMessage method when clicked, consequently updating the message property.

Directives

Vue.js employs directives to provide additional functionality to your templates. For instance, you can employ the v-on directive to listen to events, such as @click in the aforementioned example. Other commonly used directives encompass v-bind, v-for, and v-if.

Conclusion

Vue.js is a powerful framework for building dynamic web applications, and it’s an excellent choice for beginners due to its simplicity and gradual learning curve. In this beginner’s guide, you’ve learned how to set up Vue, create a Vue instance, perform data binding, and use directives.

To continue your journey with Vue.js, explore the official documentation, build small projects, and don’t hesitate to seek help from the Vue community. With practice, you’ll soon be building interactive and engaging web applications with ease. Good luck!

Author: Harshit Katiyar