Vue js guide for beginners

Vue Js guide for beginners

Vue.js is a nothing but Javascript library that helps you to build attractive and faster web applications. Vue.js is using MVVM architectural. MVVM means Model-View-ModelView.

Let’s getting started with Vue.js,

Vue.js is a progressive framework for building a user interface. Vue.js is perfectly capable of powering sophisticated building Single-Page application when it’s used in combination with modern tools and classic library.

Building first application with vue.js


Create one .html file. Let’s give name index.html.

Include Vue.js javascript library.

<script src=""></script>

Now, Create a view model for Vue.js If you have a question like what is view model. Let’s think view model is like object in Vue.js. You can give it to any HTML UI. In below example use “my_view” in div

<div id="my_view">

Create Vue model in a separate js file.

var myModel = {
 name: "Ashley",
 age: 24

Now we have both. View and model. Let’s make ViewModel.

var myViewModel = new Vue({
 el: '#my_view',
 data: myModel

Now, create two-way binding

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  {{ name }} is {{ age }} years old.

It’s binding with model and view using Vue.js

If you want to add a filter like lowercase, uppercase, capitalize than use below the pattern.

{{ name | lowercase }}

Rendering array in Vue.js using as v-for

var myModel = {
 name: "Ashley",
 age: 24,
  friends: [
   { name: "Bob", age: 21 },
   { name: "Jane", age: 20 },
   { name: "Anna", age: 29 }

Let’s bind with HTML data

<div id="my_view">
      <li v-for="friend in friends"> {{ }} </li>

This is very basic introduction of Vue.js. Let me know, if you have any complex problem.


The complete guide on Vue.JS


Leave a Reply

Your email address will not be published. Required fields are marked *