Cara menggunakan vue untuk membuat terminal mudah alih

Kata Pengantar

Dalam masyarakat maklumat yang berkembang pesat hari ini, aplikasi mudah alih menjadi semakin popular, dan vue, sebagai rangka kerja bahagian hadapan yang mudah digunakan dan cekap, juga digunakan dalam pembangunan aplikasi mudah alih Telah digunakan secara meluas. Jadi, seterusnya kami akan memperkenalkan cara menggunakan vue untuk membuat terminal mudah alih.

Teks

1. Pasang vue-cli

Sebelum mula menggunakan vue untuk pembangunan bahagian hadapan mudah alih, kita perlu memasang vue-cli terlebih dahulu. Masukkan arahan berikut dalam tetingkap baris arahan:

npm install -g vue-cli

Selepas pemasangan selesai, kita boleh menggunakan vue-cli untuk mencipta projek.

2. Cipta projek

Masukkan arahan berikut dalam tetingkap baris arahan:

vue init webpack my-project

di mana, my-project adalah Nama projek boleh dinamakan secara bebas mengikut keperluan anda sendiri.

3. Pasang kebergantungan

Masukkan direktori projek, dan kemudian masukkan arahan berikut dalam tetingkap baris arahan:

npm install

Arahan ini akan pasang semua kebergantungan projek Semua kebergantungan diperlukan.

4. Tulis kod

Sebelum menulis kod, kita perlu membina halaman mudah sebagai paparan, yang termasuk kotak input, butang dan senarai. klik butang untuk Kandungan ditambahkan pada senarai.

Untuk menggunakan vue, kita perlu memperkenalkan vue ke dalam main.js dahulu:

import Vue daripada 'vue'

Kemudian, tambahkan teg div dalam index.html :

Seterusnya, kita perlu menulis komponen dan melekapkannya pada teg div.

Mula-mula, cipta folder komponen dalam direktori src, dan kemudian buat fail HelloWorld.vue di bawah folder, kodnya adalah seperti berikut:

eksport lalai {
nama: 'HelloWorld',
data () {

return {
  content: '',
  list: []
}

},
kaedah: {

add() {
  this.list.push(this.content)
  this.content = ''
}

}
}

Kandungan dalam teg templat mewakili susun atur komponen, termasuk kotak input, butang dan senarai. Pada masa yang sama, arahan v-for digunakan dalam senarai untuk melintasi data dan menjadikannya pada halaman.

Kandungan dalam teg skrip mewakili logik komponen, termasuk dua objek, data dan kaedah Dua atribut, kandungan dan senarai, ditakrifkan dalam objek data, yang digunakan untuk menyimpan kandungan dan senarai input data oleh pengguna; objek kaedah Kaedah tambah ditakrifkan yang digunakan untuk menambah kandungan yang dimasukkan oleh pengguna ke senarai dan mengosongkan kotak input.

Kemudian, perkenalkan komponen dalam App.vue:

Atas ialah kandungan terperinci Cara menggunakan vue untuk membuat terminal mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!