Sarmad

Vue.js Reference

Sarmad's photo
Sarmad
·

3 min read

Using Vue.js CDN:

We simply add the Vus.js CDN link in a script tag inside head tag.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.2.11"></script>
    <title>Vue.js</title>
</head>

<body>
    <h1>Hello World</h1>
    <script src="app.js"></script>
</body>

</html>

app.js

console.log("Hello World")

image.png

Creating the Vue app

We add a div tag with id="app". This is where our Vue.js app will mount.

index.html

<body>
    <h1>Hello World</h1>
    <div id="app"></div>
    <script src="app.js"></script>
</body>

We create the Vue.js app using Vue.createApp method. Then we use mount method and give the id of div tag in HTML page.

app.js

const app = Vue.createApp({
  template: "<h2>Hi there!</h2>",
})

app.mount("#app")

image.png

Data and Templates

We can use placeholders e.g. {{ name }} and Vue.js can inject the data dynamically into the template.

index.html

<body>
    <h1>Hello World</h1>
    <div id="app">
        <h2>My name is {{ name }}</h2>
    </div>
    <script src="app.js"></script>
</body>

app.js

const app = Vue.createApp({
  data() {
    return {
      name: "Sarmad",
    }
  },
})

app.mount("#app")

image.png

Click Events

We can emit events using v-on directive. Its value can be a JavaScript expression or statement. In this case, we have added two buttons to change the age.

index.html

<div id="app">
    <h2>My name is {{ name }} and I am {{ age }} years old!</h2>
    <button v-on:click="age++">Increase Age!</button>
    <button v-on:click="age--">Decrease Age!</button>
</div>

app.js

const app = Vue.createApp({
  data() {
    return {
      name: "Sarmad",
      age: 25,
    }
  },
})

app.mount("#app")

gB77OclqYu.gif

We can also call a method. Let's create a resetAge method that resets the age to 25.

index.html

<div id="app">
    <h2>My name is {{ name }} and I am {{ age }} years old!</h2>
    <button v-on:click="age++">Increase Age!</button>
    <button v-on:click="resetAge">Reset Age!</button>
    <button v-on:click="age--">Decrease Age!</button>
</div>

app.js

const app = Vue.createApp({
  data() {
    return {
      name: "Sarmad",
      age: 25,
    }
  },
  methods: {
    resetAge() {
      this.age = 25
    },
  },
})

app.mount("#app")

XePzwS8Zdq.gif

Conditional Rendering

We can render elements conditionally using v-if and v-else directives. In this example, we are using the variable loggedIn.

index.html

<div id="app">
    <p v-if="loggedIn">Welcome back, {{ username }}</p>
    <p v-else>Please login</p>
</div>

app.js

const app = Vue.createApp({
  data() {
    return {
      loggedIn: true,
      username: "sarmad",
    }
  },
})

app.mount("#app")

ccbk0QZ9yp.gif

We can also toggle the visibility of an element using v-show directive which doesn't actually remove the element from DOM but sets the display to none. Here:

index.html

<div id="app">
    <p>Welcome<span v-show="loggedIn">, {{ username }}</span>!</p>
</div>

UKhLxHqK6O.gif

Iteration

We can use v-for to iterate over iterables. In this example, we are using the variable loggedIn.

index.html

<div id="app">
    <p>Welcome<span v-show="loggedIn">, {{ username }}</span>!</p>
    <div v-if="loggedIn">
        <ul>
            <li v-for="friend in friends">
                {{ friend.username }}
            </li>
        </ul>
    </div>
</div>

app.js

const app = Vue.createApp({
  data() {
    return {
      loggedIn: true,
      username: "sarmad",
      friends: [{ username: "@saad" }, { username: "@suleman" }],
    }
  },
})

app.mount("#app")

image.png

Vue.js