vue プロジェクトには vue インスタンスが 1 つだけありますか?-フロントエンドQ&A-php.cn

vue プロジェクトには vue インスタンスが 1 つだけありますか?

青灯夜游

リリース： 2022-12-19 15:25:03

オリジナル

2717 人が閲覧しました

いいえ、vue プロジェクトには複数の vue インスタンスを含めることができます。 vue プロジェクトでは、通常、main.js で定義される VUE インスタンスは 1 つだけで、残りは vue コンポーネントインスタンスです。 Vue はインスタンスから構築されます。コンポーネントは Vue のインスタンスです。プロパティは各コンポーネント内に書き込むことができるため、各コンポーネントは Vue のインスタンスになります。

vue プロジェクトには vue インスタンスが 1 つだけありますか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

いいえ、vue プロジェクトには複数の vue インスタンスを含めることができます。

Vue はインスタンスから構築されます。コンポーネントは Vue のインスタンスです。プロパティは各コンポーネント内に書き込むことができるため、各コンポーネントは Vue のインスタンスになります。 vue プロジェクトでは、通常、main.js で定義される VUE インスタンスは 1 つだけで、残りは vue コンポーネントインスタンスです。

Vue インスタンス

Vue を使用してプロジェクトを作成する場合、最も重要なのは Vue インスタンスであり、Vue を学習するための方向性を提供します。 Vue インスタンス関連の「機能」が私たちの最終目標です。

まず、HTML ファイルに vue.js を読み込みます。スクリプトタグを使用して vue.js ファイルを直接読み込むことができます:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>

ログイン後にコピー

このページをブラウザで開き、次のように入力します。コンソール Vue を見ると、Vue は本質的に関数であることがわかります。

vue プロジェクトには vue インスタンスが 1 つだけありますか?

実際、Vue はコンストラクターであり、「クラス」とみなすことができます。新しいインスタンスを通じて作成されます。では、1 ページに作成できるインスタンスの数はいくつでしょうか?

通常、ページ内に作成される Vue インスタンスは 1 つだけです:

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        });
</script>
</body>

ログイン後にコピー

Vue インスタンスを作成するとき、「カスタマイズされた」オブジェクトが渡されます。上記のオブジェクトを別のオブジェクトに変更できます。記述方法:

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const obj = {
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

ログイン後にコピー

obj オブジェクトには、Vue インスタンスに提供される「テンプレート」を表す el 属性があります。レンダリングされる HTML が What であることを Vue に伝え、HTML と obj で実行されることの間にある種の接続を確立する方法を教えます。たとえば、HTML テンプレートに表示されるデータを Vue インスタンスのデータに関連付ける方法や、HTML テンプレートでトリガーされるイベントに応答する方法などです。関連付けを確立するには、テンプレートと Vue インスタンスの間で契約を結ぶ必要があります。

el はセレクターまたは HTMLElement (DOM を開くデザインアーキテクチャ) インスタンスにすることができます。 el は次のように記述できます:

el: document.getElementById(&#39;app&#39;),

ログイン後にコピー

または任意のセレクタでも構いません:

 el: &#39;div&#39;,

ログイン後にコピー

以下に表示される結果は何ですか?

vue プロジェクトには vue インスタンスが 1 つだけありますか?

タイトル「おはようございます、チェックイン!」の値が HTML にレンダリングされていないことが最終的にわかりました。これは、タイトルが配置されている div がスコープ内にないためです。 Vue インスタンスの内部、つまり、Vue インスタンスは、インスタンスが作成されたテンプレート (el が指すテンプレートなど) にのみ影響します。 #実際には、1 つのページで複数の Vue インスタンスを作成できます。たとえば、次のコードは 3 つの Vue インスタンスを作成し、それらが正常に動作することがわかります。

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <div id="app-body">
        <h4>{{ title }}</h4>
    </div>
    <div class="app-footer">
        <h4>{{ footer }}</h4>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmFooter = new Vue({
            el: &#39;.app-footer&#39;,
            data: function () {
                return {
                    footer: "感谢阅读",
                }
            }
        });
</script>
</body>

ログイン後にコピー

ブラウザで開くと、結果は次のようになります。 vue プロジェクトには vue インスタンスが 1 つだけありますか?

この例はコンポーネントを思い出させます。「コンポーネントは再利用可能な Vue インスタンスです。」この書き方はコンポーネントに少し似ています。各 Vue インスタンスはコンポーネントとみなされます。

別の例を見てみましょう - Vue インスタンス内にネストされた Vue インスタンス:

vue プロジェクトには vue インスタンスが 1 つだけありますか?

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <!-- 这里不能声明一个新的 Vue 实例 -->
        <div id="app-body">
            <h4>会渲染吗？{{ title }}</h4>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                    title: "#app - Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "#app-body - Vue 实例讲解"
                }
            }
        });
</script>
</body>

ログイン後にコピー

レンダリング結果は、#app 内のデータを使用していることがわかります。インスタンス:

Vue インスタンスには多数の API があり、各 API について段階的に学習する必要があります。たとえば、ライフサイクル関数、計算されたプロパティ、定義メソッド、フィルター:

vue プロジェクトには vue インスタンスが 1 つだけありますか?