Mari Belajar VueJS

Intro to VueJS (Directives)

Yuk ke halaman selanjutnya

*Gunakan Dark Mode di kiri bawah yah untuk hasil maksimal

Mari Belajar VueJS

Intro to VueJS (Directives)

Yuk ke halaman selanjutnya

*Gunakan Dark Mode di kiri bawah yah untuk hasil maksimal

Isi Pembelajaran

What is VueJS?
jQuery vs VueJS
VueJS Directives
- v-text
- v-html
- v-if
- v-model
- v-for
- v-bind
- v-on
VueJS Options API
VueJS DevTools

What is VueJS? (I)

Sebuah JS Framework untuk membangun User Interface

ℹ️ Modern - VueJS lebih terbarukan ketimbang jQuery
ℹ️ Standard Friendly - Di bangun di atas standar HTML, CSS, dan JS
ℹ️ SPA Friendly - VueJS mantap untuk membuat projek berbasis Single Page Application
ℹ️ Developer Friendly - Memiliki tingkat kesulitan yang relatif mudah ketimbang JS Framework lainnya
ℹ️ Selain Itu VueJS juga - … … … … … … …

Ingin baca lebih lanjut mengenai VueJS ?

What is VueJS? (II)

🎉 Top 3 FrontEnd JS Framework 🎉 (Tiga Besar FE JS Framework yang digunakan)*

*Berdasarkan data dari State of JS 2021

Vue vs jQuery (I)

- Kode lebih dari seribu bahasa untuk menjelaskan ini -

WF - 2022

Vue vs jQuery (II)

Mari kita liat perbandingannya

(dengan membuat aplikasi ToDo List Sederhana)

Vue vs jQuery (III)

Aplikasi Todo List

Todo

Belajar jQuery
Belajar VueJS

Bedah Kode jQuery

HTML

<div id="app">
  <h2>Todo (jQuery)</h2>
  <form method="post" id="formTodo">
    <input
      type="text"
      placeholder="Title"
      id="todoValue"
      class="p-2 rounded-xl text-gray-700"
    />
    <button
      type="submit"
      class="ml-2 p-3 rounded-xl dark:bg-green-400 dark:text-slate-700"
    >
      Tambah
    </button>
  </form>
  <ul id="todoList"></ul>
</div>
<div id="app">
  <h2>Todo (jQuery)</h2>
  <form method="post" id="formTodo">
    <input
      type="text"
      placeholder="Title"
      id="todoValue"
      class="p-2 rounded-xl text-gray-700"
    />
    <button
      type="submit"
      class="ml-2 p-3 rounded-xl dark:bg-green-400 dark:text-slate-700"
    >
      Tambah
    </button>
  </form>
  <ul id="todoList"></ul>
</div>

Bedah Kode VueJS

HTML

<div id="app">
  <h2>Todo (Vue)</h2>
  <form method="post" v-on:submit.prevent="submitForm">
    <input
      type="text"
      placeholder="Title"
      v-model="todoValue"
      class="p-2 rounded-xl text-gray-700"
    />
    <button
      type="submit"
      class="ml-2 p-3 rounded-xl dark:bg-green-400 dark:text-slate-700"
    >
      Tambah
    </button>
  </form>
  <ul>
    <li v-for="todo in todos">{{ todo }}</li>
  </ul>
</div>
<div id="app">
  <h2>Todo (Vue)</h2>
  <form method="post" v-on:submit.prevent="submitForm">
    <input
      type="text"
      placeholder="Title"
      v-model="todoValue"
      class="p-2 rounded-xl text-gray-700"
    />
    <button
      type="submit"
      class="ml-2 p-3 rounded-xl dark:bg-green-400 dark:text-slate-700"
    >
      Tambah
    </button>
  </form>
  <ul>
    <li v-for="todo in todos">{{ todo }}</li>
  </ul>
</div>

Bedah Kode jQuery (II)

JavaScript

const todos = ["Belajar jQuery", "Belajar VueJs"];

$(function () {
  todos.forEach(function (todo) {
    $("#todoList").append(`<li>${todo}</li>`);
  });

  $("#formTodo").on("submit", function (event) {
    event.preventDefault();

    const newTodo = $("#todoValue").val();

    $("#todoList").append(`<li>${newTodo}</li>`);
    $("#todoValue").val("");
  });
});
const todos = ["Belajar jQuery", "Belajar VueJs"];

$(function () {
  todos.forEach(function (todo) {
    $("#todoList").append(`<li>${todo}</li>`);
  });

  $("#formTodo").on("submit", function (event) {
    event.preventDefault();

    const newTodo = $("#todoValue").val();

    $("#todoList").append(`<li>${newTodo}</li>`);
    $("#todoValue").val("");
  });
});

Bedah Kode VueJS (II)

JavaScript

Vue.createApp({
  data() {
    return {
      todos: ["Belajar jQuery", "Belajar VueJS"],
      todoValue: "",
    };
  },
  methods: {
    submitForm() {
      this.todos.push(this.todoValue);
      this.todoValue = "";
    },
  },
}).mount("#app");
Vue.createApp({
  data() {
    return {
      todos: ["Belajar jQuery", "Belajar VueJS"],
      todoValue: "",
    };
  },
  methods: {
    submitForm() {
      this.todos.push(this.todoValue);
      this.todoValue = "";
    },
  },
}).mount("#app");

Apps Todo List (jQuery)

Todo

Belajar jQuery
Belajar VueJs

Apps ToDo List (VueJS)

Todo

Belajar jQuery
Belajar VueJS

VueJS Options API

Sebuah API dari VueJS yang bersifat Options (Object) yang merupakan fungsi internal dalam VueJS

Yang akan dipelajari di sini adalah mengenai State / Kondisi internal aplikasi VueJS itu sendiri

Terbagi menjadi:

data
methods

Options: data

Fungsi yang mengembalikan kondisi (state) reaktif awal dari suatu instance component

TL;DR

Deklarasi data yang reaktif di dalam VueJS

Vue.createApp({
  data() {
    // karena banyak kita declare untuk return object
    return {
      // masukkan "nama variabel" di sini
      sudahNgertiBelum: false
    };
  },
}).mount("#app")
Vue.createApp({
  data() {
    // karena banyak kita declare untuk return object
    return {
      // masukkan "nama variabel" di sini
      sudahNgertiBelum: false
    };
  },
}).mount("#app")

Options: methods

Deklarasi method untuk digabungkan ke dalam instance component

TL;DR

Cara deklarasi method (function) di dalam VueJS

Vue.createApp({
  // deklarasi fungsi di sini
  methods: {
    // nama fungsi di sini
    // TIDAK menggunakan arrow function
    yukBelajarVueJS() {
      // tapi kalau nanti di dalam sini mau pakai arrow, tidak apa apa
      console.log("Yuk liatin dengan serius !");
    }
  },
}).mount("#app")
Vue.createApp({
  // deklarasi fungsi di sini
  methods: {
    // nama fungsi di sini
    // TIDAK menggunakan arrow function
    yukBelajarVueJS() {
      // tapi kalau nanti di dalam sini mau pakai arrow, tidak apa apa
      console.log("Yuk liatin dengan serius !");
    }
  },
}).mount("#app")

VueJS Directives

Token spesial (markup) atau spesial attribute yang meminta si VueJS untuk melakukan sesuatu / terhadap elemen DOM.

v-text
v-bind
v-model
v-for
v-on
v-if & v-show

v-text

Directives untuk menampilkan suatu tulisan dari data yang ada

Contoh v-text

<!-- Bagian HTML -->
<div id="app">
  <div>
    <p v-text="`Dengan v-text: ` + exampleData"></p>
    <p>Dengan interpolation: {{ exampleData }}</p>
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      exampleData: "Halo VueJS",
    };
  },
}).mount("#app");
</script>
<!-- Bagian HTML -->
<div id="app">
  <div>
    <p v-text="`Dengan v-text: ` + exampleData"></p>
    <p>Dengan interpolation: {{ exampleData }}</p>
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      exampleData: "Halo VueJS",
    };
  },
}).mount("#app");
</script>

Dengan v-text: Halo VueJS

Dengan interpolation: Halo VueJS

v-bind

Directives untuk mengikat data dengan attributes yang ada di HTML, bisa juga digunakan untuk mengikat custom attributes.

Contoh v-bind

<!-- Bagian HTML -->
<div id="app">
  <div>
    <img v-bind:src="customImageUrl1" alt="A Placeholder" />
    <div style="padding-top: 0.25rem; padding-bottom: 0.25rem">&nbsp;</div>
    <img :src="customImageUrl2" alt="A Kitten" />
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      customImageUrl1: "https://via.placeholder.com/128",
      customImageUrl2: "https://placekitten.com/128",
    };
  },
}).mount("#app");
</script>
<!-- Bagian HTML -->
<div id="app">
  <div>
    <img v-bind:src="customImageUrl1" alt="A Placeholder" />
    <div style="padding-top: 0.25rem; padding-bottom: 0.25rem">&nbsp;</div>
    <img :src="customImageUrl2" alt="A Kitten" />
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      customImageUrl1: "https://via.placeholder.com/128",
      customImageUrl2: "https://placekitten.com/128",
    };
  },
}).mount("#app");
</script>

v-model

Directives untuk membuat ikatan data dua arah terhadap HTML element input form, textarea, dan select.

Contoh v-model

<!-- Bagian HTML -->
<div id="app">
  <div>
    <input
      type="text"
      v-model="customDataText"
      placeholder="Masukkan input"
      class="p-2 rounded-xl text-gray-700"
    />
    <p>Tulisan dari input ini adalah: {{ customDataText }}</p>
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      customDataText: "",
    };
  },
}).mount("#app");
</script>
<!-- Bagian HTML -->
<div id="app">
  <div>
    <input
      type="text"
      v-model="customDataText"
      placeholder="Masukkan input"
      class="p-2 rounded-xl text-gray-700"
    />
    <p>Tulisan dari input ini adalah: {{ customDataText }}</p>
  </div>
</div>

// Bagian JavaScript
<script>
Vue.createApp({
  data() {
    return {
      customDataText: "",
    };
  },
}).mount("#app");
</script>

Tulisan dari input ini adalah:

v-for

Directives untuk melakukan looping terhadap data dengan HTML element

Contoh v-for

<!-- Bagian HTML -->
<div id="app">
  <div>
    <p>Apa yang sudah dipelajari?</p>
    <ul>
      <li v-for="data in customLooper">
        {{ data }}
      </li>
    </ul>
  </div>
</div>

// Bagian Javascript
<script>
Vue.createApp({
  data() {
    return {
      customLooper: ["Options API", "Directives", "v-xxx"],
    };
  },
}).mount("#app");
</script>
<!-- Bagian HTML -->
<div id="app">
  <div>
    <p>Apa yang sudah dipelajari?</p>
    <ul>
      <li v-for="data in customLooper">
        {{ data }}
      </li>
    </ul>
  </div>
</div>

// Bagian Javascript
<script>
Vue.createApp({
  data() {
    return {
      customLooper: ["Options API", "Directives", "v-xxx"],
    };
  },
}).mount("#app");
</script>

Apa yang sudah dipelajari?

Options API
Directives
v-xxx

v-on

Directives untuk mengikat event dengan method yang ada di VueJS. Bisa juga digunakan untuk custom event

Contoh v-on

<div id="app">
  <div>
    <p>{{ customValue }}</p>
    <button v-on:click="clickMe">Tekan Aku</button>
  </div>
</div>

<script>
Vue.createApp({
  data() {
    return {
      customValue: "Masih kosong nih",
    };
  },
  methods: {
    clickMe() {
      this.customValue === "Masih kosong nih"
        ? (this.customValue = "Makin ngerti VueJS coy")
        : (this.customValue = "Masih kosong nih");
    },
  },
}).mount("#app");
</script>
<div id="app">
  <div>
    <p>{{ customValue }}</p>
    <button v-on:click="clickMe">Tekan Aku</button>
  </div>
</div>

<script>
Vue.createApp({
  data() {
    return {
      customValue: "Masih kosong nih",
    };
  },
  methods: {
    clickMe() {
      this.customValue === "Masih kosong nih"
        ? (this.customValue = "Makin ngerti VueJS coy")
        : (this.customValue = "Masih kosong nih");
    },
  },
}).mount("#app");
</script>

Masih kosong nih

v-if & v-show

Directives conditional untuk mengecek kondisi. apabila truthy, maka component di-render, apabila falsy, component akan "dihilangkan" (v-if) atau "disembunyikan" (v-show)

Contoh v-if & v-show

<div id="app">
  <div>
    <div>
      <input type="checkbox" v-model="isTouched" id="checkOne" class="mr-2" />
      <label for="checkOne">Is Touched?</label>
    </div>
    <p v-if="isTouched">Sebuah Tulisan dengan v-if</p>
    <p v-show="!isTouched">
      A text with v-show
    </p>
  </div>
</div>

<script>
Vue.createApp({
  data() {
    return {
      isTouched: true,
    };
  },
}).mount("#app");
</script>
<div id="app">
  <div>
    <div>
      <input type="checkbox" v-model="isTouched" id="checkOne" class="mr-2" />
      <label for="checkOne">Is Touched?</label>
    </div>
    <p v-if="isTouched">Sebuah Tulisan dengan v-if</p>
    <p v-show="!isTouched">
      A text with v-show
    </p>
  </div>
</div>

<script>
Vue.createApp({
  data() {
    return {
      isTouched: true,
    };
  },
}).mount("#app");
</script>

Is Touched?

Sebuah Tulisan dengan v-if

VueJS Dev Tools

Tools yang digunakan untuk meningkatkan Developer eXperience (DX)

Volar Extension (VSCode)
VueJS DevTools (Browser: Gecko / Chromium Based)

Mari Belajar VueJS

Isi Pembelajaran

Mari Belajar VueJS

Isi Pembelajaran

What is VueJS? (I)

What is VueJS? (II)

Vue vs jQuery (I)

Vue vs jQuery (II)

Vue vs jQuery (III)

Aplikasi Todo List

Todo

Bedah Kode jQuery

Bedah Kode VueJS

Bedah Kode jQuery (II)

Bedah Kode VueJS (II)

Apps Todo List (jQuery)

Todo

Apps ToDo List (VueJS)

Todo

VueJS Options API

Options: data

Options: methods

VueJS Directives

v-text

Contoh v-text

v-bind

Contoh v-bind

v-model

Contoh v-model

v-for

Contoh v-for

v-on

Contoh v-on

v-if & v-show

Contoh v-if & v-show

VueJS Dev Tools

End of Slides ?

Fun Fact:

Slide ini dibuat menggunakan VueJS 😊

Buka https://sli.dev untuk mengetahui tools pembuat slide ini lebih lanjut