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.09.09
6626
Vue.js

【Vue.js】デバイス幅によってクラスを切り替える方法

2022.09.06
1796
Vue.js

Vue.jsで開閉するドロップダウンリストを実装する方法

2022.09.02
3369
Vue.js

Vue.jsでWordPressから新着記事一覧を取得・外部サイトに表示する方法

2022.09.20
2453