Vue mata burung: bagaimana untuk memulakan Vue.js

Dapatkan salinan CSS Visual Dictionary anda termasuk rajah semua sifat CSS.

Gambar oleh Sam Bark pada Unsplash

Anda selalu mahu mula belajar kod dalam kerangka Vue, tetapi entah bagaimana anda tidak mempunyai masa dalam jadual sibuk anda.

Mungkin anda merasa dibanjiri oleh semua perpustakaan dan kerangka kerja? Tutorial Vue (permulaan) mata burung ini mungkin membantu.

Banyak seperti React, Vue memecah aplikasi JavaScript anda ke dalam beberapa bahagian:

  • objek permohonan
  • kaedah ahli dan hartanah
  • dan pandangan sebenar (ini adalah di mana elemen HTML anda).

Atribut HTML berasaskan Vue

Vue menambah banyak atribut tersuai kepada unsur-unsur yang biasanya tidak anda lihat dalam HTML standard, dengan mempersiapkannya dengan v-.

Sebagai contoh, terdapat v-html, v-if, v-else dan banyak lagi. Mereka semua mempunyai tujuan khusus mereka: unsur-unsur penyajian. Mari kita lihat cepat.

Suis Boolean

Pertunjukan v lagi ialah untuk mengalihkan elemen berdasarkan keadaan penglihatan mereka.

Ini dinyatakan dalam data harta permohonan Vue sebagai {boolean: true;}.

Kemudian, dalam HTML anda, anda boleh menggunakannya untuk menentukan unsur mana yang akan dipaparkan.

Hello!

Setiap kali App.data.boolean benar, elemen

akan kelihatan.

Logik aplikasi anda kini boleh 'menukar' elemen

pada 'atau' off 'dalam kod anda. Perubahan itu secara automatik diberikan.

Looping

Arahan v untuk arahan membuat gelung untuk menyenaraikan elemen HTML.

Ini bermakna anda boleh membenamkan iterator terus ke elemen HTML untuk memberikan senarai data yang disimpan dalam array dalam keadaan aplikasi Vue anda. Anda tidak perlu menaip elemen HTML yang sama berulang kali.

Berikut adalah contoh klasik dari iterator for-loop.

Pertama, sediakan data dalam objek permohonan anda:

biarkan E = new Vue ({
     el: '#L', // pautan ke elemen id = "L"
   data: {
  barang: [
      {message: 'One'},
      {mesej: 'Dua'},
      {message: 'Three'}]}
});

Sekarang dalam bekas aplikasi HTML utama anda:

      
  • {{item.message}}

Arahan v untuk item 'untuk item dalam item'.

Ini bermakna anda membuat pembolehubah baru yang dipanggil item dalam gelung {{... here ...}} anda. Item harta benda berasal dari objek data aplikasi itu sendiri.

Ini akan menyebabkan pelbagai item JSON anda sebagai elemen HTML!

Ia akan sama seperti penulisan tangan HTML berikut:

      
  • Satu   
  • Dua   
  • Tiga

Saya tidak akan memasuki butiran di sebalik setiap sifat tunggal v dan apa yang dilakukan dalam tutorial ini. Tetapi seperti yang anda dapat lihat mereka boleh menjadi sangat berguna.

Jadi bagaimana anda sebenarnya membina aplikasi Vue dengan ini?

Membina Aplikasi

Dengan menggabungkan data keadaan aplikasi anda dengan sifat-sifat berasaskan v ini, anda membuat persatuan antara logik anda dan rendering paparan aplikasi.

Ini memendekkan aplikasi JavaScript anda, menjimatkan lebar jalur (terutama pada aplikasi besar). Ia juga membantu anda membuat perkara yang dilakukan lebih cepat.

Dalam tangkapan skrin di bawah, perancah permohonan adalah di mana semua teg dan templat anda akan diberikan.

Ini berfungsi seperti React. Vue merawat aplikasi utama anda

sebagai bekas bagi keseluruhan aplikasi. Ia menyimpan sifat dan kaedah dalam objek aplikasi (lihat di bawah).

Dalam tangkapan skrin, garisan biru menunjukkan bagaimana data aplikasi anda terikat kepada elemen HTML yang memaparkan paparan.

Barisan hijau menghubungkan kaedah anda ke acara.

Perhatikan garis besar merah dalam imej di atas. Dalam Vue, anda perlu mengikat URL dengan: href dan bukan atribut href. Sekiranya anda tidak melakukannya, pautan tidak akan berfungsi.

// Benar (notis yang terkemuka: sebelum atribut href)
 {{url}} 
// Ralat (URl tidak akan dilancarkan)
 {{url}} 

Data Permohonan

Apabila membina aplikasi dalam Vue (atau bahkan kerangka atau perpustakaan yang serupa lain), anda biasanya memikirkan satu tempat penyimpanan utama untuk data anda. Dalam React ia boleh menjadi harta kerajaan. Dalam Vue ia hanya disimpan dalam objek data.

Menurut dokumentasi Vue itu sendiri, penyimpanan data - sering disebut sebagai sumber kebenaran - disimpan dalam harta data mentah pada objek permohonan utama itu sendiri:

const sourceOfTruth = {}

const application = new Vue ({data: sourceOfTruth});

Perkara yang keren tentang ini ialah anda boleh menyimpan nilai dalam data: {...} harta dan ia secara automatik menjadi tersedia dalam elemen HTML anda melalui v-teks, v-pre, v-once (hanya diberikan sekali) dan v-cloak (tunggu sehingga halaman telah selesai rendering dan Vue dipasang) dan banyak atribut lain.

Dengan kata lain, sifat (nilai primitif, objek dan kaedah) menjadi omnipresent sepanjang aplikasi dan boleh digunakan dalam semua ciri-ciri tambahan rangka kerja Vue membawa ke meja ... untuk digunakan bersama dengan atribut yang bermula dengan awalan v.

Dan hanya nota sampingan. Jika anda mengelakkan menggunakan v-jubah, anda mungkin mengalami beberapa artifak rendering. Sebagai contoh, gaya CSS melompat sekitar hanya dalam kedua pertama memuatkan aplikasi anda.

Objek permohonan Vue

Ini adalah di mana anda akan memulakan data anda dan menuliskan kaedah permohonan anda untuk menyelesaikan sesuatu.

Seperti yang anda dapat lihat, anda mempunyai siri sifat dan kaedah - sama seperti yang anda lakukan dalam kelas JavaScript biasa.

Berikut ialah tangkapan skrin yang menunjukkan objek aplikasi utama Vue anda. Di sinilah anda benar-benar membina logik aplikasi anda, dan menyimpan sifat, rentetan URL dan kaedah tersuai. Ia seperti memisahkan logik kod dari pandangan.

Apabila anda baru sahaja bermula, ini adalah idea yang baik untuk mendapatkan pandang pada pandangan mata benda sebelum melompat ke dalam kod.

Memandangkan anda tidak hanya menulis kod ke dalam tag dengan Vue, terdapat tempat tertentu di mana unsur-unsur yang berbeza dari aplikasi anda (kaedah, sifat, dll) dimaksudkan untuk tinggal.

Vue menyediakan cara berfikir abstrak tentang aplikasi anda, dengan melambungkan semuanya ke satu tempat - objek App.

Ia mengikat bersama kod JavaScript anda dan unsur HTML yang akan menjadikan paparan aplikasi anda, termasuk data atau sifat yang disimpan di objek aplikasi utama Vue anda.

Oleh kerana mereka dimanipulasi, "pandangan" (bahagian visual) permohonan anda akan dikemas kini secara automatik.

Aplikasi anda selak ke bekas

, seperti React. Anda boleh melihat kod ini dalam penyemak imbas untuk melihat apa yang dilakukannya, atau menyalin kod sumber sebagai titik permulaan untuk membina aplikasi Vue anda sendiri.