vueのelの略語は何ですか?

青灯夜游
リリース: 2022-12-13 18:12:25
オリジナル
7326 人が閲覧しました

vue では、el はマウントポイントともいえる要素の略称です。 el の機能は、ページ上に既に存在する DOM 要素を Vue インスタンスのマウント ターゲットとして提供することです。CSS セレクターまたは HTMLElement インスタンスにすることができます。インスタンスがマウントされた後、要素は「vm」として使用できます。 .$el」にアクセスします。

vueのelの略語は何ですか?

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

el はエレメントの略称で、マウントポイントとも言えます。この原理は、MVC アーキテクチャでは、タグをいくつかのタグをラップするコンテナとして使用するため、必要な属性を保持したままタグを再レンダリングできるようになります。

すべての vue2.0 プロジェクトで、ルート インスタンスの生成時にエントリ ファイル (つまり main.js) で el 属性が設定されることがわかりますが、この属性はコンポーネントでは設定できません。以下は、

公式ドキュメント の el 属性の説明を引用しています:

el

  • Type : string | 要素

  • 制限: newでインスタンスを作成する場合にのみ有効です。

  • 詳細:

    ページ上にすでに存在する DOM 要素を、Vue インスタンスのマウント ターゲットとして指定します。 CSS セレクターまたは HTMLElement インスタンスにすることができます。 [関連する推奨事項:

    vuejs ビデオ チュートリアル Web フロントエンド開発 ]

    インスタンスがマウントされた後、

    vm.$ を使用して要素にアクセスできます。 el

    インスタンス化中にこのオプションが存在する場合、インスタンスはすぐにコンパイル プロセスに入ります。それ以外の場合は、明示的に

    vm.$mount() を呼び出して手動でコンパイルを開始する必要があります。

簡単に言えば、el の役割は、現在の vue コンポーネントによって生成されたインスタンスをページのどの要素に挿入するかを示すことです。el 属性の値は、 CSS セレクター、文字列、または直接対応する要素オブジェクトを指定します。また、el 属性は、new を使用してインスタンスを生成する場合にのみ設定でき、コンポーネント内の設定オブジェクトをエクスポートするだけです。el が設定されている場合、エラーが報告されます。

// 错误使用方式,在组件中设置el
// 提示错误: [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
export default {
    el: '#app'
}
 
// 正确写法
var vm = new Vue({
    el: '#app'
})
ログイン後にコピー
プロジェクト内のindex.htmlを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>backstage</title>
  </head>
  <body>
    <!-- {el:&#39;#app&#39;} 即把这里的元素作为根实例的挂载对象 -->
    <div id="app"></div>
  </body>
</html>
ログイン後にコピー
vm.$el を印刷すると、インスタンスが el の要素にマウントされていることがわかります:

(学習ビデオ共有:

Vuejs 入門チュートリアル 基本プログラミング ビデオ )

以上がvueのelの略語は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート