目的
当記事は筆者の学習アウトプットを目的としております。
もしご覧になった方で当記事の内容に誤りがあった際は、ご指摘頂けると幸いでございます。
今回はVue.jsにおける「マウント」について触れます。
マウントとは
広義的な意味としての、IT分野における「マウント」という言葉の意味は以下の通りとなっております。
【マウントとは、コンピュータに接続した周辺機器や外部記憶装置等をオペレーティングシステム（OS）に認識させ、利用可能な状態にすることを指します。 例えばクラウドサービスにおいて、イメージディスクとよばれるISOファイルを仮想マシン上で認識させることを「ISOファイルのマウント」と呼びます。】 ※クラウド・データセンター用語集参照
https://www.idcf.jp/words/mount.html#:~:text=%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%AB,%E3%81%AE%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E3%80%8D%E3%81%A8%E5%91%BC%E3%81%B3%E3%81%BE%E3%81%99%E3%80%82
筆者の解釈だと、
【AにBをぶち込み、Aの中でBを使えるようにする】
みたいなイメージを持っています。かなり雑な考え方だとは思いますが…。
じゃあ、Vue.jsの中ではどうなの？
Vueのインスタンスをマウントすると、指定したHTML要素はVueが生成するHTML要素に置き換わります。Vueインスタンスで定義した機能などは、マウントしたHTML要素とその子孫の要素でのみ使用可能です。
例えば、「
」の内部でのみVueインスタンスで定義した機能を使用できます。<div id="app>
<!--この中でのみVueインスタンスで定義した機能を使用できる-->
</div>
マウントしてみよう
Vueインスタンスはmountというメソッドを持っています。
その引数にセレクターの文字列を渡すことでマウントができます。
Vue.createApp({
//ここにアプリケーションの機能を定義する
}).mount("#app") //Vue.createApp({})がインスタンス！
以上のコードは「
という一つのHTML要素にマウントしている状態」ということとなります。最後に
以下、ポイントをあげていきます。
・Vue.jsではVueインスタンスを作成してマウントすることで、Vueアプリケーションを動作させる
・Vueインスタンスの作成にはVue.createAppメソッドを使用する
・Vue.createAppの引数に機能を定義していく
・Vueインスタンスのマウントにはmountメソッドを使用
・マウントしたHTML要素はVueが生成するDOMに置き換わり、その内部でのみVueの機能が利用できる