HTMLでvueをインスタンス化する方法

2. Vue インスタンスの作成

次に、Vue インスタンスを作成する必要があります。 JavaScript では、次のコード スニペットを使用して Vue インスタンスを作成できます。

var app = new Vue({ // options });

optionsパラメーターを Vue コンストラクターに渡して、Vue.js インスタンスの動作とプロパティを構成できます。 options は、さまざまなオプションを含むオブジェクトです。オプションの内容については後述するためここでは省略します。

3. Vue インスタンスを HTML 要素にバインドする

Vue.js インスタンスを作成したので、それを HTML ページ内の要素にバインドする必要があります。elオプションを使用して、Vue.js インスタンスを要素にバインドできます。このオプションは、Vue インスタンスをアタッチする HTML 要素を指定します。

var app = new Vue({ el: "#app" });

この例では、Vue.js インスタンスをid = "app"の要素にバインドします。これにより、Vue.js は HTML 内の要素のコンテンツを動的に更新できるようになります。

4. Vue テンプレートの追加

Vue.js インスタンスを作成して HTML 要素にバインドしたら、Vue.js インスタンスのテンプレートを定義する必要があります。 。テンプレートは、Vue.js インスタンスが表示するものです。

templateオプションでテンプレートを Vue.js インスタンスにバインドできます:

var app = new Vue({ el: "#app", template: "
Hello {{ name }}
", data: { name: "World" } });

この例では、Vue.js インスタンスのテンプレートを定義します。テンプレートは、Vue.js テンプレート構文を含む文字列です。テンプレートを