Intro to the Vuejs🐎🐎🐎

#vue #javascript #beginners #webdev

Have you used Vuejs or you still confused?

Today I'm here to explain about Vuejs in a simple way and its uses.
Let's start learning by writing code instead of reading long paragraphs.

For these, I'm using the codepen.
first, I started with writing div tag with id app.

<div id="app"></div>

Now let's write some Vuejs code

Vue offers us new Vue instance it takes an object as an argument.

let app = new Vue({
  el:'#app'
})

What above code does is if we write any code inside the div element it is controlled by vue.

the first property is el it means which element in our HTML code Vue needs to target.

Data Property: it manages the state inside the Vue.

Methods property: it is a place where we can define functions.

Now let's write data property and methods

var app = new Vue({
  el:'#app',
  data:{
    name:'Welcome to Vuejs',
    show:true,
    persons:['Gowtham','Aaron','Tonny']
  },
  methods:{
     changeme(){
       this.show = !this.show
    }
  }
})

the data and methods property are objects.

In data property, I have defined some static data and in methods property, I declared changeme function.

Now let's use these properties inside the div element.

<div id="app">
  <h1 v-if="show">{{name}}</h1>

  <ul v-for="person in persons" v-if="show">
    <li>{{person}}</li>
  </ul>
  <button @click="changeme">
    {{show ? 'Hide' : 'Show'}}
  </button>
</div>

I defined an h1 element with v-if directive have you seen one thing I have used show property which is we already defined inside the data property in our Vue instance.

What v-if does is it only shows in the dom when the given condition is true.

The second thing I have used an unordered list with the v-for directive

v-for helps to loop through the array for that I have used persons array which is we already defined inside the data property in our Vue instance.

I have used double curly braces because of Vue uses the template like syntax for data-binding.

last thing which is button element I have registered a click handler
for that I have used @click directive which is a shorthand of v-on:click
you can use any of them.

The final output is

You can use Vue in small apps or big apps or you can make a complete Single page app with Vue.

Hope you guys love these To know more about Vuejs You can check out Docs

Resources
Vue Docs
Vue Directives
Event Handiling in vuejs