1分でわかる！簡単 Vue.jsモーダルの作り方！

Vue.jsは人気のあるJavaScriptフレームワークの一つであり、モダンなウェブアプリケーションの開発に非常に便利です。今回は、Vue.jsを使用して簡単なモーダルを作る方法について説明します。

#エンジニア #勉強 #vtuber

Vue.jsを使用してモーダルを作るには、まずVue.jsのライブラリを読み込む必要があります。以下のHTMLのタグ内に、CDNを使用してVue.jsのライブラリを読み込みます。

    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    

次に、モーダルを表示するボタンと実際のモーダルのコンポーネントを作成します。以下のHTMLのタグ内に、ボタンとモーダルのコンポーネントを追加します。

    
    <div id="app">
      <button v-on:click="showModal = true">モーダルを表示</button>
      <modal v-if="showModal" v-on:close="showModal = false">モーダルのコンテンツ</modal>
    </div>
    
    

最後に、Vue.jsのインスタンスを作成し、モーダルの表示と非表示を制御するためのデータやメソッドを追加します。

    
    <script>
      Vue.component('modal', {
        template: `
          <div class="modal">
            <div class="modal-content">
              <span class="close" v-on:click="$emit('close')">×</span>
              <p><slot></slot></p>
            </div>
          </div>
        `
      });

      new Vue({
        el: '#app',
        data: {
          showModal: false
        }
      });
    </script>
    
    

以上で簡単なVue.jsモーダルの作成が完了です。これを参考にして、自分のウェブアプリケーションにモーダルを追加してみてください。