$ Vue.js Getting started with vuejs

Written by : Harsh Vardhan Goswami

 

 

Hey folks! Welcome to my artcile on getting started with vue.js and today we will be learning WTF is Vue.js. So,without any further do let’s get started. Vue.js is not any other hyped javascript framework like React and angular are as they are backed by two tech giants but this framework is from a team of legends. Vue.js is a must learn stuff, its so easy to understand and the functionality it provides are so Awesome that you gonna fall in love with it.

What is Vue.js ?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
–Summary– 1.Vue.js lets you extend HTML with HTML attributes called directives 2.Vue.js directives offers functionality to HTML applications 3.Vue.js provides built-in directives and user defined directives

Hey that was just the defination of vue.js here is lot more to explore.

Vue.js Directives

1. Vue.js uses double braces {{ }} as place-holders for data.
2. Vue.js directives are HTML attributes with the prefix v-

Example

<div id="app">
<h1> { { message } }</h1>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

Output : Hello Vue!

Now if you have already understood the Hello World program then you are now eligible to proceed further. Now the real game begins.

Vue.js Binding

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes:

<div id="app">
<h1> { { message } }</h1>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "John Doe";
}
</script>

Vue.js Two-Way Binding

The v-model directive binds the value of HTML elements to application data. This is called two-way binding:

<div id="app">
  <p>{ { message } }</p>
  <p><input v-model="message"></p>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

Vue.js Conditional binding

v-if binding

It’s easy to toggle the presence of an element, too:

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

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

v-else binding

You can aslo add v-else binding. It displays another element with v-else shit if the v-if conditional gets false. Just follow the example below.

<div id="appxx">
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>

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

  // Output will ne Oh no 😢.

v-else-if binding

The v-else-if, as the name suggests, serves as an “else if block” for v-if. It can also be chained multiple times:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

//Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

Vue.js Loop Binding

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element:

Example

<div id="app">
 <ul>
   <li v-for="x in todos">
   { { x.text } }
   </li>
  </ul>
</div>

<script>
myObject = new Vue({
    el: '#app',
    data: {
    todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue.js' },
        { text: 'Build Something Awesome' }
        ]
    }
})
</script>

Installation

The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

or:

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

I hope this clears your basics about vue.js. You can refer to vue.js official documentation for more. Vue.js has lot more to explore.