Asrofil Vault

2. Dasar-Dasar VueJS

2 min read

tech

Table of Content

Introduction

Setiap framework apapun itu, tentu memiliki sintaks dan aturan penulisan khusus yg dibuat untuk sedemikian rupa agar dipatuhi oleh pengguna framework tersebut. VueJS memiliki beberapa aturan yg dibuat mulai dari bagaimana cara menulisnya, gimana formatnya, dan lain sebagainya.

Membuat Aplikasi VueJS

app.js

var app = new Vue({
el: '#app',
data: {
	pesan: 'Haloo ini pesan dari vue',
}
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar VueJS</title>
</head>
<body>
    <h1>Latihan VueJS</h1>
    <div id="app">
        <p>{{ pesan }}</p>
    </div>
 
    <!-- VueJS -->
    <script src="<https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js>"></script>
    <script src="app.js"></script>
</body>
</html>

Note : pada pembelajaran kali ini, saya pribadi menggunakan vue versi 2 an. Menggunakan versi 3 mengalami error di new Vue()

Penjelasan Sederhana :

  1. pertama kita membuat file app.js
  2. memanggil objek Vue
  3. membuat property el: '#app'
  4. membuat properti data supaya dapat direndering di html (biasa disebut rendering)
  5. pada html jangan lupa untuk membungkus codingan vue kita di dalam tag dengan id app(penamaan bebas)

Mustaches

Cara pertama adalah dengan menggunakan mustaches untuk rendering ke html. Untuk menggunakan mustaches caranya simple, kita tinggal panggil variabel datanya dan meletakkan nya kedalam kurung kurawal ganda.

<div id="app">
	{{ pesan }}
</div>

Itu aja? Mending langsung aja coding di body html nya. lebih simple!

Ada beberapa keuntungan menggunakan metode ini daripada menuliskan secara langsung ke body. Dengan menggunakan metode ini, data dan DOM akan terhubung dan semuanya menjadi reactive. Untuk pembuktian silahkan buka console di browser dan ketik app.pesan = 'isi'

V-Text

Ada cara lain untuk menampilkan data, dengan menggunakan v-text.

app.js

var app = new Vue({
el: '#app',
data: {
	pesan: 'Menggunakan directive v-text',
}
})

index.html

<div id="app">
	<p v-text="pesan"></p>
</div>

V-Html

Bagaimana jika kita ingin menampilkan teks dengan berbagai format html di dalam Vuejs?

app.js

var app = new Vue({
el: '#app',
data: {
	pesan: '<b>Menggunakan directive v-html</b>',
}
})

index.html

<div id="app">
	<p v-html="pesan"></p>
</div>

Revisi : setelah mengetahui jquery ajax, maka ada kemiripan penggunaan antara jquery ajax dengan vuejs.

Date : 19-06-2024

Graph View

Recent notes