Vue 2 [Part-1]

Vue is a Javascript framework for building user interfaces. It builds on top of HTML, CSS and Javascript and provides the declarative and component-based programming model that helps you efficiently develop user interfaces

Overview of Vue

1. Works with existing or new apps
2. Lightweight and modular
3. Built on components
4. Component communication
5. Robust command-line interface

Getting Started with Vue

The easiest way to try out Vue is to create an index.html file and include Vue with:

<!-- development version, includes helpful console warnings -->
<script src="****https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Setting up a Vue Instance

Declarative Rendering

Vue enables us to declaratively render data to the DOM using a template syntax:

<div id="the_food_app">
    <h1>{{ title }} </h1>
    <h2>{{ subtitle }} </h2>
</div>

var app = new Vue({
    el: '#the_food_app',
    data: {
        title: 'The Food App',
        subtitle: 'This app is all about food!' 
    }
});

The Food App
This app is all about food!

This looks similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked and everything is now reactive.

Note that we are no longer have to interact with HTML directly. A Vue app attaches itself to a single DOM element (#the_food_app in our case) and then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

In addition to text interpolation, we can also bind element attributes like this:

<div id="app">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

Here we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and they apply special reactive behaviour to the rendered DOM.

Conditionals and Loops

It is easy to toggle the presence of an element by using v-if directive.

<div id="app">
  <span v-if="seen">Now you see me</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

We can bind data to not only text and attributes, but also the structure of the DOM.

v-for directive can be used for displaying a list of items using the data from an array.

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

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

1. Learn Javascript
2. Learn Vue
3. Build something awesome

Handling user input

To let users interact your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instance.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Before button click
Hello Vue.js!

After button click
!sj.euV olleH

Hope you liked the first part of the blog. I will come up with the next parts of the blog in future.

If you liked it, please like the blog.

Thank you 😊