Rumah > Artikel > hujung hadapan web > Bermula dengan VUE3 untuk Pemula: Menggunakan Komponen Vue.js untuk Mencipta Jadual Dinamik
Bermula dengan VUE3 untuk Pemula: Menggunakan Komponen Vue.js untuk Mencipta Jadual Dinamik
- PHPzasal
- 2023-06-15 16:38:131944semak imbas
Vue.js ialah rangka kerja JavaScript bahagian hadapan yang perpustakaan terasnya memfokuskan pada lapisan paparan. Pada masa yang sama, ia juga merupakan rangka kerja progresif untuk membina antara muka pengguna yang boleh dicampur dengan perpustakaan lain atau projek sedia ada. Vue.js memisahkan keadaan masa jalan aplikasi daripada perwakilan visual keadaan, membantu pembangun mengurus dan mengemas kini UI dengan lebih mudah.
Dalam artikel ini, kami akan memperkenalkan komponen Vue.js dan aplikasinya dalam mencipta jadual dinamik.
Komponen Vue.js boleh digunakan semula, blok kod serba lengkap yang boleh digunakan untuk menyatakan satu ciri, elemen atau kawasan aplikasi anda. Dalam Vue.js, konsep komponen terkandung dalam tika Vue, di mana setiap tika ialah komponen. Fikirkan komponen sebagai elemen tersuai yang mengandungi pilihan dan kaedah kitaran hayatnya sendiri.
Untuk mencipta komponen Vue.js, anda boleh menggunakan kaedah Vue.component(), yang menerima dua parameter. Parameter pertama ialah nama komponen, dan parameter kedua ialah objek komponen, yang mengandungi templat HTML elemen, sifat terkira, kaedah dan pilihan lain.
Dalam contoh di bawah, kami akan mencipta komponen Vue.js yang dipanggil "dynamic-table" yang akan menghasilkan jadual dinamik:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<dynamic-table></dynamic-table>
</div>
<script>
Vue.component('dynamic-table', {
data: function() {
return {
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
{ id: 4, name: '赵六', age: 35 }
],
headings: ['编号', '姓名', '年龄']
}
},
template: `
<table>
<thead>
<tr>
<th v-for="heading in headings">{{ heading }}</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableData">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
</tr>
</tbody>
</table>
`
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>Dalam contoh ini, kami menggunakan The Vue.component( ) kaedah mencipta komponen bernama "dinamik-jadual". Dalam atribut data komponen, kami mentakrifkan data (tableData) dan pengepala (tajuk) jadual dinamik. Kami menggunakan sintaks templat Vue untuk mentakrifkan templat HTML jadual dalam atribut templat dan menggunakan arahan v-for untuk menjana baris dan lajur jadual dinamik.
Apabila komponen dipaparkan, kami menggunakan komponen yang didaftarkan dengan kaedah Vue.component() dalam contoh Vue supaya ia boleh digunakan pada halaman. Jika anda ingin menggunakan komponen "dinamik-jadual" pada halaman, anda hanya perlu menggunakan elemen tersuai jadual dinamik, iaitu, 73d601c6a7c14b1e13dee41c258da8f8c827662688a4c3a3cc8d8e08f83fc0df.
Melalui contoh di atas, kami mempelajari cara menggunakan komponen Vue.js untuk mencipta jadual dinamik asas. Dalam projek sebenar, fungsi jadual yang lebih kompleks boleh dilaksanakan dengan mentakrifkan sifat, kaedah dan peristiwa yang lebih dikira. Dengan bantuan Vue.js, mencipta jadual dinamik menjadi lebih mudah dan mudah.
Atas ialah kandungan terperinci Bermula dengan VUE3 untuk Pemula: Menggunakan Komponen Vue.js untuk Mencipta Jadual Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!