ホームページ > 記事 > ウェブフロントエンド > HTML ページで Vue をインスタンス化する方法
HTML ページで Vue をインスタンス化する方法
- PHPzオリジナル
- 2023-04-26 16:13:33799ブラウズ
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 サイトの他の関連記事を参照してください。