VueJS - Template: A Panduan untuk Pemula

Hai sana, bakat super Vue.js masa depan! Saya sangat gembira menjadi pandu Anda dalam perjalanan yang menarik ke dunia template Vue.js. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa menjamin bahwa Vue.js adalah salah satu kerangka kerja yang paling ramah bagi pemula. Jadi, siapkan diri Anda dan mari kita masuk ke dalam!

Apa Itu Template Vue.js?

Sebelum kita mulai mengoding, mari kita mengerti apa itu template dalam Vue.js. Bayangkan itu sebagai kerangka tulang halaman web Anda - itu tempat Anda menentukan struktur HTML Anda dan menambahkan sedikit magi Vue.js untuk membuatnya dinamis dan interaktif.

Struktur Dasar

Berikut adalah template Vue.js sederhana:

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

Dalam contoh ini, {{ message }} adalah sintaks khusus di Vue.js yang disebut "interpolasi". Itu seperti placeholder yang Vue.js akan ganti dengan data aktual.

mari lihatnya dalam aksi:

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

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

Ketika Anda menjalankan kode ini, Anda akan melihat "Hello, Vue!" ditampilkan di halaman Anda. Magis, kan? {{ message }} di template diganti oleh nilai message dalam data instance Vue kami.

Direktif: Petunjuk Khusus Vue

Sekarang, mari bicarakan tentang direktif. Ini adalah atribut khusus yang dimulai dengan v- dan memberikan petunjuk kepada Vue.js tentang bagaimana harus berperilaku. Mereka seperti kecil ahli sihir yang melempar mantra pada HTML Anda!

v-bind: Atribut Dinamis

Direktif v-bind digunakan untuk membind atribut secara dinamis ke ekspresi. Itu sangat umum hingga ada even shorthand untuk itu: :.

<div id="app">
<a v-bind:href="url">Klik saya!</a>
<!-- Shorthand -->
<a :href="url">Klik saya!</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

Dalam contoh ini, atribut href dari tag <a> secara dinamis diatur ke nilai url dalam data instance Vue kami.

v-if, v-else-if, v-else: Penyajian Kondisional

Direktif ini memungkinkan Anda menyajikan elemen secara kondisional berdasarkan kebenaran ekspresi.

<div id="app">
<p v-if="seen">Sekarang Anda melihat saya</p>
<p v-else>Sekarang Anda tidak melihat saya</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

Coba mengubah seen ke false dan lihat maginya terjadi!

v-for: Penyajian Daftar

Direktif v-for digunakan untuk menyajikan daftar item berdasarkan array.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Belajar JavaScript' },
{ text: 'Belajar Vue' },
{ text: 'Bangun sesuatu yang menakjubkan' }
]
}
})
</script>

Ini akan menyajikan daftar todos. Setiap elemen <li> dibuat untuk setiap item dalam array todos.

Penanganan Event dengan v-on

Direktif v-on digunakan untuk mendengarkan event DOM dan menjalankan beberapa JavaScript saat mereka terjadi. Itu sangat berguna hingga ada shorthand untuk itu: @.

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Balikkan Pesan</button>
<!-- Shorthand -->
<button @click="reverseMessage">Balikkan Pesan</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

Klik tombol dan lihat pesan Anda melakukan backflip!

Binding Dua-Arah dengan v-model

Direktif v-model membuat binding dua-arah pada elemen input form atau komponen.

<div id="app">
<input v-model="message">
<p>Pesan adalah: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

Ketik di field input dan lihat pesan terupdate secara real-time. Itu seperti magi, tapi lebih baik - itu adalah Vue.js!

Properti Terhitung dan Pemantau

Properti Terhitung

Properti terhitung adalah seperti properti data super-powered. Mereka adalah properti yang dihitung berdasarkan properti lain.

<div id="app">
<p>Pesan asli: "{{ message }}"</p>
<p>Pesan yang dibalik: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

Properti reversedMessage akan selalu menjadi balikan message, dan itu akan terupdate secara otomatis saat message berubah!

Pemantau

Pemantau adalah seperti pengawal yang setia untuk data Anda. Mereka memantau perubahan dalam data dan melakukan tindakan saat perubahan itu terjadi.

<div id="app">
<p>
Bertanya pertanyaan ya/tidak:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: 'Pertanyaan biasanya mengandung tanda tanya. ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'Menunggu Anda berhenti mengetik...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Pertanyaan biasanya mengandung tanda tanya. ;-)'
return
}
this.answer = 'Menghitung...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Tidak dapat mencapai API. ' + error
})
}
}
})
</script>

Dalam contoh ini, kita memantau properti question. Saat itu berubah, kita memperbarui answer dan menjalankan metode untuk mengambil jawaban baru dari API.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode yang kita bahas:

Metode	Deskripsi	Contoh
v-bind	Membind atribut secara dinamis	<a v-bind:href="url">
v-if	Penyajian kondisional	<p v-if="seen">Now you see me</p>
v-for	Penyajian daftar	<li v-for="item in items">{{ item }}</li>
v-on	Penanganan event	<button v-on:click="doSomething">
v-model	Binding dua-arah	<input v-model="message">

Dan begitu saja! Anda baru saja mengambil langkah pertama Anda ke dunia menakjubkan template Vue.js. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Sebelum Anda menyadari, Anda akan membuat aplikasi Vue.js yang menakjubkan. Selamat coding!

Credits: Image by storyset