Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kotak carian

Vue.js ialah rangka kerja JavaScript yang popular dan VUE3 ialah versi terbaharunya, yang memberikan kelajuan lebih pantas dan ciri yang lebih berkuasa. Dalam artikel ini, saya akan menunjukkan kepada anda cara untuk merangkum komponen kotak carian mudah menggunakan pemalam VUE3 dan Vue.js.

1. Buat projek Vue

Mula-mula, anda perlu memasang VUE3 dan Vue-cli. Selepas memasang Vue-cli, anda boleh memasukkan arahan berikut untuk mencipta projek vue baharu:

vue create search-box

dan kemudian ikut gesaan untuk memasang.

2. Buat pemalam baharu

Dalam folder projek anda perlu mencipta pemalam baharu. Dalam folder src, buat fail yang dipanggil search-box.js. Dalam fail ini, anda akan menentukan komponen kotak carian dan pemalam.

Dalam search-box.js, kita perlu mengimport Vue dahulu:

import Vue from 'vue'

Kemudian, kita boleh mentakrifkan komponen Vue baharu bernama SearchBox:

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

dalam Dalam bahagian atas kod, kami telah menentukan komponen kotak carian mudah. Komponen ini mempunyai kotak input, butang dan fungsi yang boleh mengendalikan carian. Jika pengguna mengklik butang carian atau menekan kekunci Enter, nilai searchTerm akan dihantar kepada komponen induk melalui acara emit.

3. Pasang pemalam

Kita perlu menggunakan pemalam Vue untuk menukar search-box.js kepada pemalam Vue yang boleh digunakan. Pada penghujung fail search-box.js, tambahkan kod berikut:

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

Dengan cara ini, kami telah mencipta pemalam Vue.js yang boleh digunakan. Kita boleh menggunakan pemalam ini dalam projek Vue.

4. Menggunakan pemalam

Kini, kami perlu menggunakan pemalam kotak carian dalam projek Vue kami. Untuk melakukan ini, import pemalam search-box.js dalam fail main.js projek anda dan pasang pemalam menggunakan kaedah Vue.use:

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

Kini kami telah memasang pemalam kotak carian. Ia boleh digunakan dalam projek Vue.

5. Menggunakan SearchBox dalam komponen

Dalam projek Vue, kita boleh menggunakan komponen kotak carian. Sebagai contoh, dalam komponen bernama App.vue, kita boleh menambah komponen bernama carian:

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

Dalam kod di atas, kami telah menambah komponen bernama carian dan menambah padanya Kaedah yang dipanggil doSearch. Kaedah dipanggil apabila pengguna mencari dan ia memaparkan kotak amaran yang mengandungi istilah carian.

6. Jalankan projek Vue

Akhir sekali, kita hanya perlu menjalankan projek Vue. Dalam terminal baris arahan, masukkan arahan berikut:

npm run serve

Ini akan memulakan projek Vue. Buka http://localhost:8080 dalam pelayar anda untuk melihat komponen kotak carian.

Kesimpulan

Dalam tutorial ini, kami telah mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen kotak carian mudah. Kami telah mempelajari cara menggunakan komponen ini dalam projek VUE3 dan mendapati VUE3 lebih pantas, lebih berkuasa dan lebih mudah untuk digunakan. Kini anda boleh menggunakan pengetahuan ini untuk membina aplikasi Vue.js anda sendiri.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kotak carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!