Skip to main content

Overview of Vue.js Main Features

Vue.js is an open-source JavaScript framework used for building user interfaces and single-page applications. It was created by Evan You and is currently maintained by him and the rest of the active core team members. Vue.js is known for its simplicity and ease of use, making it a great choice for beginners who are just starting to learn about web development frameworks.

Features of Vue.js​

Declarative Rendering​

Vue.js uses a declarative rendering model. This means that you tell Vue what you want to achieve, and Vue will figure out how to make it happen. This is done using a simple template syntax.

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

In the above example, the {{ message }} in the HTML is a placeholder for data from the Vue instance. This data is declared in the data object in the Vue instance.

Component-Based​

Vue follows a component-based architecture. This means you can build large-scale applications composed of small, self-contained, and often reusable components. 

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Reactive​

Vue.js has a reactive data binding system. This means that when you change data in your Vue instance, the view updates automatically. 

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

app.message = 'Hello World!'

In the above example, changing the value of app.message will automatically update the view where {{ message }} is used.

Directives​

Vue.js uses attributes called directives to bind data to the DOM. These directives offer functionality to HTML applications, and come prefixed with v- to indicate that they are special Vue.js attributes.

<p v-if="seen">Now you see me</p>

In the above example, the v-if directive is used to conditionally render the paragraph element based on the truthiness of the seen data property.

Vue CLI​

Vue CLI (Command Line Interface) is a full system for rapid Vue.js development, providing interactive project scaffolding via @vue/cli, zero-config prototyping via @vue/cli + @vue/cli-service-global, a runtime dependency (@vue/cli-service) and a full graphical user interface to create and manage Vue.js projects.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Vuex​

Vuex is a state management pattern and library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Vue.js is a very powerful and flexible framework that makes building web applications easier and more efficient. It is easy to learn and use, and has a strong community behind it to help you when you get stuck. Whether you are a beginner or an experienced developer, Vue.js has something to offer you.