VueJs 2 v-for loop

What Is VueJs 2? What's New Vue.js 2?

What Is Vue.js?
The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end).

The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments.

The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM (Model-View-ViewModel) pattern.

The Vue.js is supporting to multiple Components and libraries like -
ü  Tables and data grids
ü  Notifications
ü  Loader
ü  Calendar
ü  Display time, date and age
ü  Progress Bar
ü  Tooltip
ü  Overlay
ü  Icons
ü  Menu
ü  Charts
ü  Map
ü  Pdf viewer
ü  And so on

The Vue.js was developed by “Evan You”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -
ü  v-show
ü  v-if
ü  v-for
ü  v-else
ü  v-on
ü  v-model

What Is Vue.js 2?
The Vue.js 2 is similar to ReactJs and Angular in some ways. There are some key features that will help us to started easily i.e.
ü  Directives
ü  Components
ü  Template and JSX
ü  Routing
ü  And so on

What's New In Vuejs 2?
ü  Rendering layer is now based on a lightweight virtual DOM implementation
ü  Detection of static class names and attributes
ü  Detection of sub trees without dynamic bindings
ü  It supports server side rendering with client side hydration
ü  It Support to JSX
ü  Template-to-virtual-DOM compiler

Example 1 - VueJs 2 v-if conditions
HTML Code -
<script src="https://unpkg.com/vue"></script>
<div id="demo-app">
    <p v-if="IsEnable()">{{ WelcomeMsg }}</p>
</div>

VueJs Code -
var app = new Vue({
  el: '#demo-app',
  data: {
    WelcomeMsg: 'Hello, My Name Is Anil Singh.'
  },
  methods: {
    IsEnable: function() {
      return true;
    }
  }
});

Result looks like - Hello, My Name Is Anil Singh.

Example 2 – VueJs 2 v-for loop -
HTML Code –
<script src="https://unpkg.com/vue"></script>
<div><h2>v-for loop</h2></div>
<div id="forLoop">
    <ol>
      <li v-for="user in users">
          {{ user.name }} , Age - {{ user.age }}
      </li>
    </ol>
</div>


VueJs 2 Code –
var app = new Vue({
  el: '#forLoop',
  data: {
    users: [
      {id:1name: 'Anil Singh'age: 32},
      {id:2name: 'Aradhya Singh' , age: 4},
      {id:3name: 'Reena Singh' , age: 25},
      {id:4name: 'Sunil'age: 27 }
    ]
  }
});


The Result looks like –
v-for loop -
ü  Anil Singh , Age - 32
ü  Aradhya Singh , Age - 4
ü  Reena Singh , Age - 25
ü  Sunil , Age – 27

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions