Panduan pemula ' s ke Vue 3

Tutorial ini memberikan pemahaman asas tentang Vue.js, yang terpakai bagi kedua -dua Vue 3 (digunakan dalam contoh ini) dan versi terdahulu. Kami akan merangkumi aspek utama membina aplikasi VUE, termasuk:

Membuat aplikasi Vue menggunakan Vue Cli.
senarai rendering dengan
• . v-for
Melaksanakan rendering bersyarat dengan
• , v-if, dan v-else-if. v-else
menggunakan CSS dinamik dengan arahan
• . :class
mengendalikan input dan peristiwa pengguna.
menggunakan kaedah dan sifat yang dikira.
menggunakan atribut HTML mengikat dengan
• . v-bind

Konsep Utama:

• Vue CLI Persediaan: Vue CLI menyelaraskan penciptaan projek, memudahkan konfigurasi dan membenarkan pemilihan ciri yang disesuaikan.
• rendering senarai (): v-for dengan cekap membuat senarai dinamik, mengoptimumkan prestasi DOM dengan kekunci yang unik (menggunakan atribut ). :key
• rendering bersyarat: Memaparkan kandungan secara dinamik berdasarkan keadaan menggunakan , v-if, dan v-else-if. v-else
• mengikat data dua hala (): v-model penting untuk mengendalikan input pengguna dan memberikan maklum balas UI masa nyata.
• Properties yang dikira: Melakukan transformasi dan pengiraan data tanpa mengubah secara langsung data asal, meningkatkan kereaktifan.
• CSS dinamik (): Kelas CSS yang digunakan secara kondusif berdasarkan keadaan komponen, membolehkan gaya dinamik. :class

Membina permohonan dengan Vue CLI:

Vue CLI memudahkan persediaan projek. Mari pasang:

(Sebagai alternatif, gunakan

.)

<code class="language-bash">npm i -g @vue/cli</code>

Buat projek baru: yarn global add @vue/cli

Pilih "Ciri -ciri Pilih Secara Manual," memilih Babel untuk tutorial ini. Pilih Vue 3 dan pilih untuk meletakkan konfigurasi dalam fail khusus. Jangan simpan pratetap.

<code class="language-bash">vue create your-project-name</code>

Rajah 1: Vue CLI Skrin Selamat Datang

Rajah 2: Mengkonfigurasi projek Vue dengan Vue CLI

Rajah 3: Memilih versi Vue dalam Vue Cli

Ini mewujudkan struktur projek (lihat Rajah 4). Padam

dari

dan keluarkan rujukannya dari

. HelloWorld.vue

Rajah 4: Struktur Projek Vue 3 kami

Persediaan Aplikasi:

Gantikan kandungan App.vue dengan yang berikut:

<code class="language-bash">npm i -g @vue/cli</code>

Ini menetapkan tajuk mudah. Bahagian berikut akan secara progresif membina ini. (Coretan kod selanjutnya akan disediakan di bahagian berikutnya, membina secara berperingkat.)

rendering senarai:

tambah array tasks ke kaedah data() dalam App.vue:

<code class="language-bash">vue create your-project-name</code>

membuat senarai menggunakan v-for:

<code class="language-vue"><template>
  <h1>{{ title }}</h1>
</template>

</code>

atribut :key adalah penting untuk prestasi.

Rajah 5: Senarai rendering dalam vue dengan arahan v-untuk

(bahagian yang tinggal akan diteruskan dalam gaya tambahan ini, memberikan coretan kod dan penjelasan untuk setiap ciri - rendering bersyarat, input pengguna, kaedah, peristiwa, sifat yang dikira, atribut mengikat, dan CS dinamik - sama dengan yang asal Input, tetapi dengan penambahan dan penjelasan yang lebih jelas. 🎜>

Atas ialah kandungan terperinci Panduan pemula ' s ke Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!