Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces that based on MVVM(Model–View–ViewModel). Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.


Model-View-ViewModel (MVVM) is a structural design pattern that separates objects into three distinct groups:

  • Models hold application data. They’re usually structs or simple classes.
  • Views display visual elements and controls on the screen. They’re typically subclasses of UIView.
  • View models transform model information into values that can be displayed on a view. They’re usually classes, so they can be passed around as references.


Benefits of Vue.js

  • Very Small Size
  • Easy to Understand and Develop Applications
  • Simple Integration
  • Reactivity
  • Detailed Documentation
  • Two-Way Communication


Example Code:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

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