HTML ページで Vue をインスタンス化する方法-フロントエンドQ&A-php.cn

HTML ページで Vue をインスタンス化する方法

PHPz

リリース： 2023-04-26 16:18:24

オリジナル

829 人が閲覧しました

Vue は、動的 Web アプリケーションを作成するための人気のある JavaScript フレームワークです。 Vue には、既存の HTML ページに簡単に埋め込むことができる、学習と使用が簡単な API があります。この記事では、HTML ページで Vue をインスタンス化する方法に焦点を当てます。

Vue.js は、HTML ページに簡単に埋め込むことができる軽量の JavaScript フレームワークです。 Vue をインスタンス化するには、次のように Vue インスタンスを定義する必要があります:

new Vue({
  // options
})

ログイン後にコピー

ここでは、オプションオブジェクトを渡すことによって Vue をインスタンス化します。オプションオブジェクトには、Vue アプリケーションのさまざまな設定と構成が含まれています。

Vue を HTML ページに埋め込むには、Vue.js ファイルをダウンロードして HTML ドキュメントに含めます。 CDN (コンテンツ配信ネットワーク) を使用するか、Vue.js ライブラリをダウンロードしてサーバーに保存できます。 CDN を使用して Vue を含める例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

ログイン後にコピー

上の例では、Vue.js CDN を使用して HTML ドキュメントに Vue を含めています。次に、ID が「app」の HTML 要素を定義し、その要素に Vue インスタンスをアタッチし、Vue インスタンスの data オプションで「message」という属性を定義します。

Vue インスタンスの "el" オプションで、Vue アプリケーションを ID "app" の HTML 要素にアタッチすることを Vue に伝えます。このように、Vue は HTML ページ内の要素を見つけて、Vue テンプレートエンジンを使用してレンダリングします。

Vue インスタンスのデータオプションで、「message」という名前のプロパティを定義し、その初期値を「Hello Vue!」に設定します。二重括弧構文 ({{ message }}) を使用すると、HTML ドキュメントに属性を挿入できます。

これらの簡単な手順で、Vue をインスタンス化して HTML ページに埋め込むことができます。 Vue は使いやすさと柔軟性があるため、インタラクティブな Web アプリケーションを作成するのに最適です。

以上がHTML ページで Vue をインスタンス化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。