Categories: Technical Trends, Vue.js

Vue js Back To Basics – Learn Basics Of Vue js In 5 Mins3 min read

#BackToBasics - Learn Vue js
Reading Time: 3 minutes

Vue js is one of the most prominent front end framework of java script around. There are plethora of front end frameworks of java script like Angular , React etc but to add the interactivity in your DOM along with  structural flexibility and makes reuse of components easy in your application , Vue js is the choice to go for. In this article , we are going to cover some of the basics of the Vue js that you should know before embarking the journey of learning Vue js . This series will called as #BackToBasics.  So lets start this article learn some of the very basics of this awesome front end framework.

Learn Basics Of Vue js In 5 Mins

#BackToBasics - Learn Vue js
#BackToBasics – Learn Vue js

# Data Binding

There are two type data binding in the Vue js First is One Way Data Binding  And second one is Two Way Data Binding. Let me explain each of them in simple Laymen language to you.

One Way Data Binding means that it will bind the data directly from your javascript code to your DOM .It  ensures that the target property updates when a change in the source property occurs. One of the fine example of this type of data binding would be the display of a simple thank you or success message after submitting the form from the user end.

Two Way Data Binding  means that it will bind the data from your JavaScript code to DOM and from DOM to your JavaScript code.It  ensures the reflection of changes in both directions — from target to source and source to target. You can use two-way data binding when you need to handle user input.For example, what if we could change the value of message in the DOM via an input? No problem. Just add an input to the document with an attribute v-model and assign it our message property.

# Directives

Directive’s job is to reactively apply side effects to the DOM when the value of its expression changes.  v-model  is a directive. There are other directive as well for example v-for allows you to render a list of items. Use it in combination with  v-bind to set the properties of each item in the list.

Similar to template v-if, you can also use a tag with v-for to render a block of multiple elements.Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression.

#Vue Instance

Each and every Vue application that you are going to develop will be started with creating your Vue instance what i am saying is something like this

Although not strictly associated with the MVVM (Model–view–viewmodel (MVVM) is a software architectural pattern) , Vue’s design was partly inspired by it. As a convention, we often use the variable vm (short for ViewModel) to refer to our Vue instance.

In another word, we can see Vue instance as an intermediary between your data and view. A Vue application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components.

Read More Avout Vue js :- Why You Should Use Vue.js With Laravel

# Event Handling

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. Event directive modifier along with v-on directive automatically make the event to do something without you explicitly coding it in your event handler. For example :-

.prevent   which automatically calls preventDefault()  on event.Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

Now that we have covered four basics of the Vue js you can head to the Official Documentation to learn more about the Vue js and start building your next web application.

Cheers ! Happy Coding

All Rights Reserved @ Techanical-Atom
%d bloggers like this: