• Vue.js

Vue.jsをCDNで導入・html環境に構築する方法【バージョン3対応】

Vue.js（バージョン3）をCDNを使ってローカルのhtml環境に導入する方法について知りたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

CDNを読み込む

<script src="https://unpkg.com/vue@next"></script>

上記scriptタグを実装したい環境のhtmlにコピペします。

以上でvue.jsを用意してるサーバーを読み込み、vue.jsの機能が使えるようになります。

Vue.jsが機能するか確認

<div id="app">
  {{message}}
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "こんにちは"
      }
    },
  });
  app.mount("#app");
</script>

Vue.jsを使って、保持されたデータ値を指定したhtmlタグ内に表示する簡単なコード例です。

Vue.jsはscriptタグ内に記述します。

mountメソッド

任意の変数.mount(“反映させたい箇所のhtmlクラスorID”);

まず最初にmountメソッドを定義。

vue.jsで実行する処理に対し、反映させたい場所を指定します。

Vue.jsを宣言

const 変数名 = Vue.createApp({
　実行したい処理
});

次にVue.jsの宣言を記述します。

変数名はmountメソッドで決めた変数を指定。

宣言内で実行したい処理を記述していきます。

dataメソッドを定義

data() {
　return {
　　データを保持
　}
}

次にdataメソッドを定義します。

dataメソッドは、データを保持するメソッドです。

データを表示

{{データ名}}

dataメソッドで定義したデータの値を表示する方法です。

値を表示したい箇所で{{データ名}}を記述する事で表示できます。

ブラウザでhtmlファイルを確認、値が表示されていたら成功です。

まとめ

Vue.js（バージョン3）をCDNを使ってローカルのhtml環境に導入する方法について紹介しました。

以上で解説を終わります。