Intro to VueJs for beginners-1

In this blog I will discuss some of the important concepts for a beginner to get started with Vuejs. There is no alternative to reading documentation but

1-Use Vue with CDN

We need to add this cdn link which is nof Vue3

<script src="https://unpkg.com/vue@next"></script>

and create a Vue App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>
     <script src="script.js"></script>
</body>
</html>

In script.js

const app = Vue.createApp({
    template:'<h1>Hello World</h1>'

});
app.mount('#app');

2-Templates and data
Here we see we create a Vue app and data here is a function inside which there are some properties
In script.js

const app = Vue.createApp({
    template:'<h1>Hello World</h1>',data(){ return name:'Tanzim',age:20}

});
app.mount('#app');

In html file we need to print it out with a mustache syntax

 <div id="app">His name is {{ name }} his age is {{ age }}</div>

app.mount('#app');

3.Method and Click events

In script.js

const app = Vue.createApp({
    // template:'<h1>Hello World</h1>'
    data() {
        return {
            name:'Tanzim',
            age:25,
            profession:'WebDeveloper'
        }
    },
    methods: {
        increaseAge(){
            return this.age++;
        },
        //
        decreaseAge(){
            return this.age++;
        },
        changeTitleofProfession(){
            this.profession="Full Stack Software Developer"
        }
    },

});
app.mount('#app');

Here we make different methods and associate them with data properties in our html we add different methods as click events to Different buttons
In html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">His name is {{ name }} his age is {{ age }} and profession is {{ profession }}
        <!-- v- is a directive it helps users to intercat to different type of events  -->
        <button v-on:click="age++">Increase Age</button>
        <button v-on:click="age--">Decrease Age</button>
   <!-- Using Method and properties -->
        <button @click="increaseAge">Increase Age</button>
        <button @click="decreaseAge">Decrease Age</button>
        <button @click=" changeTitleofProfession">Change Title</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
     <script src="script.js"></script>
</body>
</html>

Here when we click increase or decrease button the age increases and decreases
If we Click Change title than the profession changes

4.Conditional Rendering
The directive v-if is used to conditionally render a block.
In VueJs we can mutate properties inside data function directly
The showhideBooks methods is such that we can directly mutate the data property showBooks.The showbooks is false initially it will display when we mutate the state it will be true

const app = Vue.createApp({
    // template:'<h1>Hello World</h1>'
    data() {
        return {
            author:'NewBook',

            nameofBook:'WebDeveloper',
            showBooks:true
        }
    },
    methods: {
        showHideBooks(){
            return this.showBooks =! this.showBooks;
        }

    },

});
app.mount('#app');

In index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <div v-if="showBooks">
          Bookname-{{ author }}
        name of Book-{{ nameofBook}}
          </div>
             <button @click="showHideBooks">
            <span v-if="showBooks">Hide Books</span>
            <span v-else>Show Books</span>
        </button>





    </div>
    <script src="https://unpkg.com/vue@next"></script>
     <script src="script.js"></script>
</body>
</html>

5.Other MouseEvents

There are some other mouse events such as mouseclick, mouseoever,doubleclick

  </div>
           <button @click="showHideBooks">  
           <button @mouseover="showHideBooks">
           <button @mouseleave="showHideBooks">
            <button @dblclick="showHideBooks"> 
            <span v-if="showBooks">Hide Books</span>
            <span v-else>Show Books</span>
        </button>

6.Outputting Lists
ListsOutputting-1
If we want to loop over an array of objects in Vue Js
In script.js

  data() {
        return {
            author:'NewBook',

            nameofBook:'WebDeveloper',
            showBooks:true,
            books:[
                {name:'Bookone',author:'John'},
                {name:'Bootwo',author:'John'},
            ]
        }
    },

In html template we can just run a v-for loop

 <div id="app">
        <div v-for="book in books">
            <h1>{{ book.name }}</h1>
            <p>{{ book.author }}</p>

        </div>

        </button>

  </div>

It will iterate through each property in books array
7-Attribute Binding
There are several attributes in html like href,title we can bind them dynamically
Like if we write

 <a href="https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/"></a>

Instead we should write

    data() {
        return {
            author:'NewBook',

            nameofBook:'WebDeveloper',
            showBooks:true,
            books:[
                {name:'Bookone',author:'John'},
                {name:'Bootwo',author:'John'},

            ],
            url:"https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/"
        }
    },

Everytime we change an attribute we can do it in data function

Its not dynamic and everytime if there is one tag which is same we need to go to each tag and change it instead we should have to go to every anchor tag and change instead now we can name a property url in data function and bind it to anchor tag
Same way we can bind title to a span tag when we place cursor over the span tag we can see the title

  <span v-bind:title="author">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>

8.Class Binding
Here in Vue we can bind classes to. Of showBooks property is false then it will get class colortwo if its true it will get color.

<h1 :title=" nameofBook">New</h1>
  <div v-if="showBooks">
     <p :class="{color:showBooks  }">ShowBooks</p>
  </div>
  <div v-if="!showBooks">
      <p :class="{colortwo:!showBooks}">ShowBooks</p>
  </div>

So these are some basic topic for any beginner to get started with Vue js in the next part we will discuss about some more concepts.