Vue.js Tutorial
Data Binding
- vue.js-data-binding
- form-input-bindings
Transition & Animation

Vue.js Conditions & Loops

Conditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one or more various steps depending on the conditions. Same we can use in the case of Vue.js.

v-if Directive Example

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
        <div id="app">
<span v-if="seen">This is visible to you</span>
        </div>           
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

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

    

Note: Here, we have used a simple CSS file to make the output more attractive. This CSS file will be the same for all the following examples.

Index.css file:

     html, body {
    margin: 5px;
    padding: 0;
}

    

Output:

This is visible to you

In the above example, if you enter app3.seen = false, you will see that the message disappears.

Example2:

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
        <div id="app">
<span v-if="seen">This is visible to you</span>
        </div>           
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

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

    

Output:

In the above example, you can see that you can bind data to not only text and attributes, but also the structure of the DOM. Vue also provides a powerful transition effect system that can automatically apply transition effects when the elements are inserted, updated, or removed by Vue.

v- else-if Directive Example

We can use the v- else-if directive to provide an else functionality in the above example. By using this directive, if the condition is not satisfied or not true then it will return the else statement that you set for the program. Let's see an example.

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
        <div id="app">
            <span v-if="seen">Now you see me</span>
            <span v-else-if=>You can't see me </span>
        </div>           
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

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

    

Output:

You can't see me

In the above example, you can see that the output is shown as "You can't see me" which is set as v-else-if statement. There are also some other directives in Vue.js that can be used for their own special functionalities.

v- for Directive Example

The v-for directive is used to display a list of items using the data from an Array. See the following example.

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

     var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'HTML Tutorial' },
      { text: 'CSS Tutorial' },
      { text: 'JavaScript Tutorial' },
      { text: 'AngularJS Tutorial' },
      { text: 'Vue.js Tutorial' }
    ]
  }
})

    

Output:


      

       HTML Tutorial

       CSS Tutorial

       JavaScript Tutorial

       AngularJS Tutorial

       js Tutorial

Output:

Handling User Input

The v-on directive facilitates users to interact with your Vue.js app. It is used to attach event listeners that invoke methods on Vue instances. Let's see an example of v-on directive.

v-on Directive Example

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>      
        <div id="app">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">Click Here to Reverse Message</button>
        </div>       
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

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

    

Output:

After clicking on the "Click Here to Reverse Message" button, the above string will be reversed.

In the above example, the state of app is updated without touching the DOM. All DOM manipulations are handled by Vue itself.

v-model Directive Example

The v-model directive is used to make two-way data binding between form input and app state. See the following example:

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
        <div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>        
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

     var app6 = new Vue({
  el: '#app',
  data: {
    message: 'Two way data binding!'
  }
})

    

Output:

You will see the automatic synchronization of data in the above example. When you change the data in one component, the change will be reflected in both components. See the below example:

Composing with Components

The component system is used when we want to build large-scale applications composed of small, self-contained, and often reusable components. A large application interface can be abstracted into a tree of components:

Here, we use the v-bind directive to pass values in repeated component. See the following example:

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>      
        <div id="app">
  <ol>
    <todo-course
      v-for="course in courseList"
      v-bind:todo="course"
      v-bind:key="course.id"
    ></todo-course>
  </ol>
</div>        
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

     Vue.component('todo-course', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
  el: '#app',
  data: {
    courseList: [
      { id: 0, text: 'Java' },
      { id: 1, text: 'PHP' },
      { id: 2, text: 'Angular' },
      { id: 3, text: 'Vue.js' }
    ]
  }
})

    

Output: