Written by Kasumi

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環境に導入する方法について紹介しました。

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

関連記事

Vue.js

Vue.jsでクリックしたら表示・非表示するイベントを実装する方法

2022.08.26
183
Vue.js

Vue.jsでページ内トップへ戻るボタンを設置する方法

2022.09.18
89
Vue.js

Vue.jsでループ処理を使い、配列から値を取り出す方法

2022.08.30
98
Vue.js

Vue.jsですべてのページ要素が読み込み完了した後に任意のイベントを実行する方法

2022.09.15
125