VUE3 入門チュートリアル: Vue.js プラグインを使用してメッセージ ボックス コンポーネントをカプセル化する

Vue.js は最も人気のあるフロントエンド フレームワークの 1 つであり、Web 開発で広く使用されています。使いやすく、効率的かつ柔軟なデータ バインディングとコンポーネント ベースの開発方法を提供し、開発者が高品質の Web アプリケーションを迅速に構築できるようにします。 Vue.js の継続的な開発に伴い、Vue3 も広く知られるようになり、新しい時代の主要なフロントエンド ツールの 1 つになりました。この記事では、Vue.js プラグインを使用してメッセージ ボックス コンポーネントをカプセル化する方法を学びます。

Vue.js とプラグイン

Vue.js はプラグインと呼ばれる概念を提供します。これは、インストールおよびアンインストール機能を備えたコンポーネントとみなすことができます。プラグインを使用して、グローバル機能を追加したり、Vue インスタンスの機能を拡張したりできます。例: Vuex、Vue Router、および Vue-i18n も Vue.js のプラグインです。

Vue.js プラグインの構造は非常にシンプルで、インストール関数で構成されています。インストール関数は、Vue コンストラクターとオプションのオプション オブジェクトを受け取る必要があります。プラグインをインストールするには、オプション オブジェクトを Vue コンストラクターに渡す必要があります。

Vue.js プラグインを使用してメッセージ ボックス コンポーネントをカプセル化する

メッセージ ボックスは、ページ上に重要な情報を表示するために使用される一般的な UI コンポーネントです。ここでは、Vue.js プラグインを使用して、単純なメッセージ ボックス コンポーネントをカプセル化します。

Vue.js では、コンポーネントには独自のライフサイクルがあり、作成、更新、破棄などの段階で適切に処理できます。したがって、プラグインを作成する際には、Vue.js が提供するライフサイクル機能を可能な限り活用する必要があります。以下は、使用するメッセージ ボックス コンポーネントの Vue コンポーネント コードです。

<template>
    <div v-show="visible" class="message-box">
        <div>{{ message }}</div>
        <button @click="close">Close</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
    };
  },
  methods: {
    show(message) {
      this.message = message;
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.message-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

このコンポーネントは、テンプレート テンプレートとスクリプト コード ブロックで構成されます。テンプレート テンプレートは HTML 構造を表示するために使用され、Vue.js のデータ バインディング メカニズムを使用してデータをレンダリングします。スクリプト コード ブロックには、ローカル データとコンポーネントのメソッドを設定するためのロジックが含まれています。

これで、このコンポーネントを Vue.js プラグインにカプセル化し、Vue.use() メソッドを使用してアプリケーションにインストールできます。以下は、メッセージ ボックス コンポーネントの Vue.js プラグイン コードです。

const messageBox = {
  install(Vue) {
    Vue.component('message-box', {
      template:
        '<div v-show="visible" class="message-box">' +
        '<div>{{ message }}</div>' +
        '<button @click="close">Close</button>' +
        '</div>',
      data() {
        return {
          visible: false,
          message: '',
        };
      },
      methods: {
        show(message) {
          this.message = message;
          this.visible = true;
        },
        close() {
          this.visible = false;
        },
      },
    });
    Vue.prototype.$message = function (message) {
      const Comp = Vue.extend({
        render(h) {
          return h('message-box', { props: { message } });
        },
      });
      const vm = new Comp().$mount();
      document.body.appendChild(vm.$el);
      vm.$on('close', () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
      });
    };
  },
};

export default messageBox;

アプリケーションの「ボタン」をクリックすると、Vue.prototype.$message() メソッドを使用して、メッセージボックスコンポーネント。このメソッドは、Vue.js コンストラクターを拡張するコンポーネント インスタンスを作成することにより、メッセージ ボックスを表示します。次に、Vue.js ライフサイクル フック関数の $mount() メソッドを使用して、コンポーネントをドキュメントの タグにマウントします。このとき、ページ上にメッセージボックスが表示されます。

概要

このチュートリアルでは、Vue.js プラグインを使用して、単純なメッセージ ボックス コンポーネントをカプセル化します。 Vue.js プラグインは非常に強力で、グローバル関数の追加や Vue インスタンス関数の拡張に使用でき、Vue.js コンポーネントのライフサイクル概念と組み合わせることで、より多くの UI コンポーネントを簡単にカプセル化できます。このチュートリアルが、Vue.js のプラグインとコンポーネント化のアイデアをより深く理解するのに役立つことを願っています。

以上がVUE3 入門チュートリアル: Vue.js プラグインを使用してメッセージ ボックス コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。