Pengenalan kepada asas pembangunan VUE3: melaksanakan fungsi asas

Dalam pembangunan bahagian hadapan, VUE sudah pasti merupakan rangka kerja yang sangat popular. Dengan keluaran VUE3, semakin ramai pembangun telah mula mempelajari dan menggunakan versi baharu VUE ini. Artikel ini akan memperkenalkan cara menggunakan VUE3 untuk membangunkan aplikasi bahagian hadapan dan menunjukkan cara melaksanakan beberapa fungsi asas berdasarkan beberapa contoh mudah.

1. Menyediakan persekitaran

Sebelum anda bermula, sila pastikan anda telah memasang Node.js dan npm. Kemudian anda boleh memasukkan arahan berikut pada antara muka baris arahan untuk memasang VUE CLI:

npm install -g @vue/cli

Selepas pemasangan selesai, anda boleh menggunakan VUE CLI untuk mencipta projek baharu. Masukkan arahan berikut dalam antara muka baris arahan:

vue create my-project

di mana "projek saya" ialah nama projek anda sendiri. Selepas itu, anda akan diminta untuk memilih pilihan konfigurasi untuk VUE. Anda boleh memilih pilihan lalai atau mengkonfigurasinya secara manual. Selepas projek dibuat, anda boleh mula menggunakan VUE3 untuk pembangunan anda sendiri.

2. Mencipta komponen

Dalam VUE, komponen ialah konsep penting. Komponen biasa mengandungi tiga bahagian: templat, skrip dan gaya. Templat ialah kandungan HTML komponen, skrip ialah kod logik komponen, dan gaya ialah helaian gaya komponen. Seterusnya, mari buat komponen mudah. Mula-mula, buat fail bernama "HelloWorld.vue" dalam direktori "src/components". Tambahkan kandungan berikut pada fail:

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

Di sini, kami mentakrifkan komponen bernama "HelloWorld" dan menetapkan teg H1 sebagai kandungan komponen. Selain itu, kami juga menentukan beberapa pilihan lain, termasuk data, kaedah, dikira dan dicipta.

3. Menggunakan Komponen

Selepas mencipta komponen, kita perlu menggunakannya dalam aplikasi. Tambahkan kandungan berikut dalam fail "src/App.vue":

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Di sini, kami telah merujuk komponen "HelloWorld" dalam komponen dan mendaftarkan komponen dalam "komponen". Dalam aplikasi, kami hanya perlu menggunakan teg "" untuk merujuk komponen. Apabila kita menjalankan aplikasi, kita akan melihat tajuk "Hello World" dipaparkan pada halaman.

4. Pengendali acara

Dalam aplikasi, kami biasanya perlu bertindak balas terhadap operasi pengguna, seperti mengklik butang, memasukkan teks, dsb. Pada masa ini, kita perlu menggunakan pengendali acara. Dalam VUE, pengendali acara boleh dilaksanakan melalui arahan "v-on". Seterusnya, mari buat komponen butang mudah Apabila pengguna mengklik butang, acara akan dicetuskan dan tetingkap pop timbul akan dipaparkan.

Pertama, buat fail bernama "Button.vue" dalam direktori "src/components". Tambahkan kandungan berikut pada fail:

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Di sini, kami telah mencipta komponen yang dipanggil "Butang" dan menentukan butang. Perintah "v-on:click" digunakan pada butang untuk mengikat acara klik, dan kaedah "showAlert" dipanggil apabila diklik untuk memaparkan tetingkap timbul.

Akhir sekali, tambah kandungan berikut dalam fail "src/App.vue":

<template>
  <div id="app">
    <Button />
  </div>
</template>

<script>
import Button from '@/components/Button.vue'

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Di sini, kami telah merujuk komponen "Butang" dalam aplikasi. Apabila kami menjalankan aplikasi dan mengklik butang, kami akan melihat tetingkap pop timbul dipaparkan.

5. Harta yang dikira

Dalam aplikasi, kadangkala kita perlu mengira nilai baharu berdasarkan satu atau lebih keadaan. Pada masa ini, kita boleh menggunakan sifat yang dikira untuk menangani masalah ini. Dalam VUE, sifat yang dikira boleh dilaksanakan melalui pilihan "dikira". Seterusnya, mari kita cipta harta yang dikira untuk mengira kuasa dua nombor.

Pertama, buat fail bernama "Number.vue" dalam direktori "src/components". Tambahkan kandungan berikut pada fail:

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

Di sini, kami telah mencipta komponen yang dipanggil "Nombor" dan menentukan kotak input untuk memasukkan nombor. Kami juga mentakrifkan sifat dikira "numberSquared" yang digunakan untuk mengira kuasa dua nombor. Apabila nombor berubah, harta yang dikira secara automatik mengemas kini kuasa dua nombor dan memaparkannya pada halaman.

Akhir sekali, tambah kandungan berikut dalam fail "src/App.vue":

<template>
  <div id="app">
    <Number />
  </div>
</template>

<script>
import Number from '@/components/Number.vue'

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Di sini, kami merujuk komponen "Nombor" dalam aplikasi dan memaparkan kotak input nombor dan kuasa dua nombor itu.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara membangunkan aplikasi bahagian hadapan menggunakan VUE3, dan menunjukkan cara mencipta komponen, menggunakan pengendali acara dan mengira sifat serta fungsi asas yang lain. Melalui contoh-contoh ini, saya percaya anda sudah mempunyai beberapa pemahaman dan kemahiran asas. Sudah tentu, VUE3 masih mempunyai banyak fungsi dan ciri berkuasa yang menunggu untuk diterokai oleh pembangun. Saya harap anda boleh terus belajar dan menggunakan VUE3, dan terus membuat kemajuan dan inovasi dalam amalan.

Atas ialah kandungan terperinci Pengenalan kepada asas pembangunan VUE3: melaksanakan fungsi asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!