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

vue-Js-guide-for-beginners
vue-Js-guide-for-beginners

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

Include Vue.js javascript library.


<script src="https://unpkg.com/vue/dist/vue.js"></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">
</div>

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.
</div>

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">
   <ul>
      <li v-for="friend in friends"> {{ friend.name }} </li>
   </ul>
</div>

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 *