Dalam pelajaran kedua, kita akan berbicara tentang pengikatan atribut, tentang menghubungkan data yang disimpan dalam instance Vue ke atribut elemen HTML. → Pelajaran pertama
Tujuan pelajaran
Di sini kita akan melihat cara menampilkan gambar dan mengatur teks atribut menggunakan pengikatan atribut
alt. Kami akan mengambil data yang relevan dari instance Vue.
Kode awal
Mari kita mulai dengan kode HTML berikut , yang terletak di file
index.html, di tag <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
Perhatikan tag
<div>dengan kelas product-image. Ini berisi elemen <img>yang ingin kita ikat secara dinamis dengan data yang diperlukan untuk menampilkan gambar.
Elemen
<div>dengan kelas product-infodigunakan untuk menampilkan nama suatu produk.
Berikut ini adalah JavaScript yang terkandung dalam file
main.js:
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
Perhatikan bahwa objek
datasekarang memiliki properti baru yang imageberisi jalur ke gambar.
→ CSS yang digunakan dalam tutorial ini dapat ditemukan di sini .
Untuk menghubungkan gaya ke
index.html, tambahkan <head>berikut ini ke tag :
<link rel="stylesheet" type="text/css" href="style.css"
Di sini kita melanjutkan dari asumsi bahwa file style memiliki nama
style.cssdan disimpan dalam folder yang sama dengan index.html.
Berikut adalah gambar yang akan kami tampilkan di halaman.
Sebuah tugas
Kami membutuhkan gambar untuk ditampilkan pada halaman. Dengan demikian, kami ingin memanipulasi gambar ini secara dinamis. Artinya, kita membutuhkan kemampuan untuk mengubah jalur ke gambar yang disimpan dalam instance Vue, dan segera melihat hasil dari perubahan ini pada halaman. Karena itu adalah atribut
srcelemen yang <img>bertanggung jawab atas gambar yang akan ditampilkan elemen, kita perlu mengikat beberapa data ke atribut ini. Ini akan memungkinkan kita untuk mengubah gambar secara dinamis berdasarkan data yang disimpan dalam instance Vue.
Istilah penting: pengikatan data
Ketika kita berbicara tentang pengikatan data dalam Vue, intinya adalah bahwa tempat di templat di mana data digunakan atau ditampilkan secara langsung "terhubung" atau "ditautkan" ke sumber data, yaitu, ke objek terkait yang disimpan dalam instance Vue.
Dengan kata lain, entitas sumber data dikaitkan dengan entitas di mana data ini digunakan, dengan sink data. Dalam kasus kami, sumber data adalah instance Vue dan wastafel adalah atribut
srcelemen <img>.
Solusi masalah
Untuk mengikat nilai properti
imagedari objek data ke properti srctag <img>, kami akan menggunakan arahan Vue v-bind. Mari kita menulis ulang kode tag <img>dari file index.html:
<img v-bind:src="image" />
Ketika Vue, saat memproses halaman, melihat konstruksi seperti itu, kerangka kerja menggantinya dengan kode HTML berikut:
<img src="./assets/vmSocks-green.jpg" />
Jika semuanya dilakukan dengan benar, maka gambar akan ditampilkan pada halaman.
Gambar kaus kaki hijau ditampilkan di halaman
Dan jika Anda mengubah nilai
imageproperti objekdata, maka nilai atribut akan berubah sesuaisrc, yang akan mengarah ke tampilan gambar baru di halaman.
Katakanlah kita ingin mengganti kaus kaki hijau dengan kaus kaki biru. Untuk melakukan ini, mengingat bahwa jalan ke file dengan gambar baru terlihat seperti
./assets/vmSocks-blue.jpg(file gambar dapat ditemukan di sini ), cukup untuk membawa kode deskripsi propertiimagedi objekdatake formulir ini:
image: "./assets/vmSocks-blue.jpg"
Ini akan menyebabkan gambar kaus kaki biru muncul di halaman.
Gambar kaus kaki biru ditampilkan di halaman
Kasing penggunaan tambahan untuk v-bind
Arahan
v-binddapat digunakan tidak hanya dengan atribut src. Ini juga dapat membantu kami menyesuaikan atribut gambar secara dinamis alt.
Mari menambahkan
dataproperti baru ke objek dengan opsi altText:
altText: "A pair of socks"
Mari kita ikat data yang sesuai ke atribut
alt, membawa kode elemen <img>ke formulir ini:
<img v-bind:src="image" v-bind:alt="altText" />
Di sini, seperti dalam kasus atribut
src, konstruk digunakan, terdiri dari v-bindtitik dua dan nama atribut ( alt).
Sekarang, jika properti dari instance Vue berubah
imageatau altText, <img>data yang diperbarui akan muncul dalam atribut elemen yang sesuai . Ini tidak akan memutus tautan antara atribut elemen dan data yang disimpan dalam instance Vue.
Teknik ini terus digunakan ketika mengembangkan aplikasi Vue. Karena itu, ada versi singkat dari catatan konstruksi
v-bind:. Sepertinya :. Jika Anda menggunakan teknik ini saat menulis kode tag <img>, Anda mendapatkan yang berikut:
<img :src="image" />
Sederhana dan nyaman. Teknik ini meningkatkan kebersihan kode.
Bengkel
Tambahkan tautan (elemen
<a>) dengan teks ke halaman More products like this. Di objek, databuat properti yang linkberisi tautan https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Bind, menggunakan direktif v-bind, properti linkke atribut hrefelemen <a>.
→ Ini adalah templat yang bisa Anda gunakan untuk menyelesaikan masalah ini.
→ Ini solusi untuk masalah tersebut.
Ringkasan
Inilah yang kami pelajari hari ini:
- Data yang disimpan dalam instance Vue dapat diikat ke atribut HTML.
- Arahan digunakan untuk mengikat data ke atribut
v-bind. Singkatan untuk arahan ini adalah titik dua (:). - Nama atribut yang mengikuti titik dua menunjukkan atribut yang datanya terikat.
- Sebagai nilai atribut yang ditentukan dalam tanda kutip, nama kunci digunakan, dimana Anda dapat menemukan data yang terhubung ke atribut.
Jika Anda mengikuti kursus ini, kami meminta Anda untuk memberi tahu kami tentang lingkungan apa yang Anda gunakan untuk mengerjakan pekerjaan rumah.
→ Bagian 1: Instantiating Vue
→ Bagian 2: Atribut Binding in Vue
