DEV Community

Tanzim Ibthesam
Tanzim Ibthesam

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

In script.js

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

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

Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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'},
            ]
        }
    },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/"
        }
    },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
amitavroy7 profile image
Amitav Roy

Nice, waiting for the part 2 of this series.

Collapse
 
tanzimibthesam profile image
Tanzim Ibthesam

Thanks a lot for your feedback

Collapse
 
piotr_jura profile image
Piotr Jura

Good article, concise and in-depth!

Collapse
 
tanzimibthesam profile image
Tanzim Ibthesam

Thanks a lot sir