Bagaimana menerapkan aplikasi perubahan judul sederhana menggunakan Vue.js

Vue.js adalah kerangka kerja JavaScript progresif. Ini memiliki banyak fitur termasuk komponen, rendering, dan perutean. Argumen Vue vs React bersifat kompetitif. Mereka berdua memiliki pro dan kontra di bidangnya.

Saya membuat aplikasi JavaScript sederhana di Vue menggunakan CDN (jaringan pengiriman konten). Aplikasi ini memiliki judul yang akan diubah menjadi huruf besar dengan mengklik tombol. Saya tahu ini adalah aplikasi sederhana. Tapi kita bisa belajar banyak hal sederhana melalui itu, seperti:

  • CDN untuk Vue
  • Objek Vue
  • menghubungkan atribut ke Vue Object
  • mendefinisikan properti data
  • mendefinisikan metode menggunakan Vue
  • memanggil metode Vue melalui pendengar

Oke, mari kita mengotori tangan kita!

Saya penggemar berat metode menyelam ke potongan, jadi kami akan mengikuti pendekatan yang sama di sini.

  1. Buat file HTML dan tautkan Vue melalui CDN.
  2. Buat objek Vue.
  3. Tautkan template HTML ke objek Vue.
  4. Buat properti data.
  5. Buat metode di objek Vue.
  6. Ubah data saat mengklik tombol.

1. Buat file HTML dan tautkan Vue melalui CDN

Awalnya buat file bernama index.html. Itu adalah pemain inti kami. File index.html berisi bagian template HTML dan objek Vue.

Saya menggunakan Visual Studio Code di sini.

Sekarang tambahkan CDN ke index.html. Kami dapat menggunakan versi pengembangan atau produksi. Tetapi akan lebih baik menggunakan versi pengembangan untuk peringatan dan kesalahan. Entri untuk versi pengembangan CDN saat ini adalah:

2. Buat objek Vue

Sekarang yang perlu kita buat adalah objek Vue di dalam file index.html. Itu dibuat di bawah tag skrip.

Itu dapat dibuat oleh:

new Vue();

Seluruh sintaks di bawah ini:

new Vue({el: ,
data: {
},
methods: {
}
});

new Vueadalah turunan dari Vue. Kita dapat mengakses properti seperti el, data, metode, dll agar dapat digunakan dengan Vue. Properti akan dijelaskan di bawah.

3. Tautkan template HTML ke objek Vue

Seperti yang kita ketahui Vue memiliki properti yang disebut "el". Properti ini menghubungkan template HTML ke objek Vue. Untuk melakukan itu, semua template HTML harus berada di bawah div tunggal dengan sebuah id. Untuk demo ini, kita bisa menggunakan id app. Kami telah menambahkan yang berikut ini ke file index.html:

Welcome to title changer

Sekarang, tambahkan id aplikasi ke objek Vue.

new Vue({
el: '#app',
});

Jadi tautannya akan sukses.

4. Buat properti data

Sekarang kita tidak ingin header "Selamat datang di title changer" menjadi teks statis. Kita harus bisa menampilkan nilai dari properti data Vue. Untuk melakukan itu, Vue memiliki properti built-in yang disebut "data". Kita perlu mendaftarkannya di sini dan menggunakan nama di HTML seperti di bawah ini:

new Vue({
el: '#app',
data: {
tile: 'Welcome to title changer'
},
});

Sekarang di <tag h3> bisa diupdate dengan double curly braces seperti interpolation di Ruby. Nilainya akan menjadi:

{{title}}

5. Buat metode di objek Vue

Vue memiliki properti built-in yang disebut "metode". Properti ini akan mendukung metode untuk dideklarasikan di dalam objek Vue.

Kita juga bisa menggunakan sintaks ES6. Izinkan saya menjelaskan keduanya di sini.

methods: {
 changeTitle: function() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

Format ES6 adalah:

methods: {
 changeTitle() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

toUpperCase()hanyalah metode JavaScript yang akan mengubah string menjadi huruf kapital. Hal penting yang perlu diperhatikan di sini adalah, kita dapat mengakses properti data menggunakan thiskata kunci. Jadi nilai yang dideklarasikan dalam properti data dapat diakses menggunakan thismetode.

6. Ubah data saat mengklik tombol

Sekarang, yang kita lakukan hanyalah memanggil metode mengklik tombol. Sederhana seperti itu.

Untuk melakukan itu, kita perlu membuat tag tombol.

click to change to upcase

Untuk menautkan tombol ke metode, kita perlu menggunakan pengendali kejadian saat mengklik tombol. Vue menyediakan pendengar bawaan yang disebut v-on.

Berikut sintaksnya:

v-on:click="call Action or Method"

Kami dapat menggabungkan dengan:

click to change to upcase

Atau kita bisa menggunakan sintaks pendek seperti di bawah ini:

click to change to upcase

Itu dia. Semua selesai

Sebelum mengklik tombol, judul HTML ada di bawah ini:

Setelah diklik, itu akan diubah menjadi huruf besar.

Itu saja. Beri komentar jika Anda memiliki masalah atau pertanyaan. Rincian Repo telah saya lampirkan di bawah ini.

tautan github. Saya akan memperbarui dengan beberapa fitur lanjutan di Vue dalam pelajaran mendatang.