Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen pemilih label

Apabila bahasa JavaScript menjadi semakin popular, pembangunan web juga semakin popular. Dalam beberapa tahun kebelakangan ini, rangka kerja dan perpustakaan JS telah menjadi semakin popular, dan salah satu rangka kerja yang paling popular ialah Vue.js. Rangka kerja yang mudah digunakan tetapi berkuasa ini telah menarik lebih ramai pembangun, menjadikan pembangunan web lebih pantas dan lebih cekap.

Dalam Vue.js, komponen adalah bahagian penting dalam membangunkan aplikasi. Vue.js membolehkan anda menulis kod secara berkomponen, memecahkan aplikasi yang kompleks kepada berbilang komponen kecil, masing-masing mempunyai fungsi dan sifat khusus tersendiri. Ini menjadikan kod lebih mudah untuk diselenggara dan dilanjutkan, di samping meningkatkan prestasi aplikasi dan kebolehgunaan semula.

Dalam artikel ini, kami akan memperkenalkan satu lagi konsep teras Vue.js: pemalam. Kami akan mempelajari cara menggunakan pemalam Vue.js untuk membalut komponen pemilih teg. Kami akan meneroka cara menulis komponen ini, membungkusnya sebagai pemalam dan menggunakannya dalam aplikasi Vue.js.

Mula menulis komponen

Mula-mula, mari tulis komponen kami. Di sini kami akan mencipta komponen pemilih teg mudah yang boleh digunakan pengguna untuk memilih set teg. Kami akan menggunakan beberapa konsep yang berkaitan dengan Vue.js, seperti komponen, prop, kaedah, dsb. Jika anda tidak biasa dengan konsep ini, adalah disyorkan untuk mempelajari asas Vue.js terlebih dahulu.

Kami akan menggunakan Vue CLI untuk mencipta aplikasi Vue.js kami. Dalam baris arahan, jalankan arahan berikut untuk mencipta aplikasi baharu:

vue create tag-selector

Seterusnya, kami akan mencipta komponen yang dipanggil TagSelector, yang mengandungi kotak input dan senarai pilihan. Pengguna boleh memasukkan nama teg melalui kotak input dan kemudian memilih teg daripada senarai pilihan.

<template>
  <div class="tag-selector">
    <input type="text" v-model="inputValue" v-on:keydown.enter="addTag()" />
    <div class="tags">
      <span class="tag" v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">x</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TagSelector",
  data() {
    return {
      tags: [],
      inputValue: ""
    };
  },
  methods: {
    addTag() {
      if (this.inputValue && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

<style>
.tag-selector {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-bottom: 1px solid grey;
}

.tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 5px;
}
</style>

Komponen ini mempunyai tatasusunan bernama tag, yang digunakan untuk menyimpan teg yang dipilih oleh pengguna. Ia juga mempunyai pembolehubah dipanggil inputValue yang digunakan untuk mendapatkan input daripada pengguna. Kaedah addTag dan removeTag digunakan untuk menambah dan mengalih keluar tag masing-masing.

Seterusnya, kita perlu merangkum komponen ini sebagai pemalam.

Membungkus komponen sebagai pemalam

Untuk merangkum komponen kami, kami perlu menulis pemalam di dalamnya. Pemalam Vue.js mestilah objek JavaScript yang mengandungi sekurang-kurangnya satu kaedah pemasangan. Kaedah ini dipanggil semasa pemasangan Vue.js dan menerima contoh Vue.js sebagai hujah pertamanya. Dalam kes ini, kami perlu mendaftarkan komponen kami (TagSelector) dalam kaedah pemasangan.

Kami juga perlu menggunakan ciri semakan versi terbina dalam Vue.js untuk memastikan pemalam itu serasi dengan versi Vue.js. Akhir sekali, kami perlu membungkus pemalam yang lengkap ke dalam fail JavaScript yang berasingan untuk digunakan dalam aplikasi Vue.js kami.

Berikut ialah kod pemalam kami:

import TagSelector from "./TagSelector.vue";

const install = function(Vue) {
  Vue.component("tag-selector", TagSelector);
};

export default { install };

// version check
const version = Number(Vue.version.split(".")[0]);

if (version >= 2) {
  // Vue.js v2.x.x
  Vue.use(install);
} else {
  console.error("This plugin only works with Vue.js version 2 or above!");
}

Kami mengimport komponen yang kami tulis sebelum ini (./TagSelector.vue) dan mencipta kaedah pemasangan untuk mendaftarkannya. Kami juga melakukan semakan versi untuk memastikan bahawa pemalam berfungsi dengan aplikasi yang serasi dengan Vue.js v2.0 dan ke atas. Akhir sekali, kami mengeksport keseluruhan objek pemalam supaya ia boleh dibungkus ke dalam fail yang berasingan.

Menggunakan Pemalam

Sekarang kami telah menulis pemalam kami dan membungkusnya ke dalam fail yang berasingan. Kami boleh menambahkan ini pada aplikasi Vue.js kami dan menggunakannya untuk memilih teg.

Pertama, kami perlu mengimport pemalam ini dalam aplikasi Vue.js kami. Kita boleh mendapatkan fail ini daripada repositori seperti npm atau cdn dan menambahkannya pada aplikasi kita.

import TagSelectorPlugin from "tag-selector-plugin";
import Vue from "vue";

Vue.use(TagSelectorPlugin);

Kini kami telah mengimport pemalam ke dalam aplikasi. Untuk menggunakan pemalam, kami hanya menambah kod berikut pada templat kami:

<tag-selector></tag-selector>

Ini akan mencipta elemen tersuai dalam aplikasi kami yang dipanggil pemilih teg dan memaparkannya sebagai komponen Pemilih Teg kami. Kami boleh berinteraksi antara elemen tersuai ini dan semua sifat dan kaedah yang ditakrifkan dalam pemalam kami.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen pemilih teg yang mudah dan cara menggunakan pemalam itu dalam aplikasi Vue.js. Belajar menulis pemalam adalah bahagian yang sangat penting dalam pembangunan Vue.js kerana ia membolehkan pembangun merangkum fungsi dan komponen dengan mudah dan menggunakannya dalam berbilang aplikasi. Saya harap artikel ini dapat membantu anda menggunakan Vue.js dengan lebih baik!

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