VueJS - Template: A Panduan untuk Pemula

Hai sana, superstar Vue.js masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia template Vue.js. Sebagai orang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa menjamin Anda bahwa Vue.js adalah salah satu kerangka kerja yang paling ramah bagi pemula. Jadi, sabikan dan mari kita masuk ke dalam!

Apa Itu Template Vue.js?

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

Struktur Dasar

Ini adalah template Vue.js sederhana:

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

Dalam contoh ini, {{ message }} adalah sintaks khusus dalam Vue.js yang disebut "interpolasi". Itu seperti placeholder yang Vue.js akan menggantikan 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. Magic, kan? {{ message }} dalam template digantikan 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 perilakunya. Mereka seperti kecilah yang melempar mantra ke HTML Anda!

v-bind: Atribut Dinamis

Direktif v-bind digunakan untuk membindikan atribut secara dinamis ke ekspresi. Itu begitu umum bahwa ada bahasa pendek untuknya: :.

<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 melihatku</p>
<p v-else>Sekarang Anda tidak melihatku</p>
</div>

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

Coba ubah seen ke false dan lihat keajaiban 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 sehingga ada bahasa pendek untuknya: @.

<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 formulir 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>

Ketikkan di field input dan lihat pesan diperbarui secara real-time. Itu seperti magis, tapi lebih baik - itu Vue.js!

Properti Terhitung dan Pemantau

Properti Terhitung

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

<div id="app">
<p>Pesan asli: "{{ message }}"</p>
<p>Pesan terbalik terhitung: "{{ 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 balik dari message, dan itu diperbarui secara otomatis saat message berubah!

Pemantau

Pemantau adalah seperti penjaga teliti bagi 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 = 'Mencari jawaban...'
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 bisa 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 pelajari:

Metode	Deskripsi	Contoh
v-bind	Membindikan 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 data dua-arah	<input v-model="message">

Dan itu 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 tahu, Anda akan membuat aplikasi Vue.js yang menakjubkan. Selamat mengoding!

Credits: Image by storyset