Heim > Artikel > Web-Frontend > Was ist die Abkürzung für el in vue?

Was ist die Abkürzung für el in vue?

青灯夜游Original: 2022-12-13 18:12:257260Durchsuche

In Vue ist el die Abkürzung für Element, das als Einhängepunkt bezeichnet werden kann. Die Funktion von el besteht darin, ein bereits auf der Seite vorhandenes DOM-Element als Mount-Ziel der Vue-Instanz bereitzustellen. Es kann sich um einen CSS-Selektor oder eine HTMLElement-Instanz handeln, das Element kann mit „vm“ verwendet werden .$el"-Zugriff.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

el ist die Abkürzung für Element, das als Mount-Punkt bezeichnet werden kann. Das Prinzip ergibt sich aus: In der MVC-Architektur wird ein Tag als Container zum Umschließen einiger Tags verwendet, sodass die Tags unter Beibehaltung einiger notwendiger Attribute neu gerendert werden können.

In jedem vue2.0-Projekt werden wir sehen, dass in der Eintragsdatei (d. h. main.js) das el-Attribut beim Generieren der Root-Instanz konfiguriert wird, dieses Attribut jedoch nicht in den Komponenten konfiguriert werden kann, die wir selbst erstellen wird unten zitiert Beschreibung des el-Attributs im offiziellen Dokument :

Typ
: string |
string | Element

限制：只在用 new 创建实例时生效。

详细：

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。【相关推荐：vuejs视频教程、web前端开发】

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount()
Einschränkungen
: Wird nur in new Gültig beim Erstellen einer Instanz.

Details

Geben Sie ein vorhandenes DOM-Element auf der Seite als Montageziel der Vue-Instanz an. Kann ein CSS-Selektor oder eine HTMLElement-Instanz sein. [Verwandte Empfehlungen: vuejs-Video-Tutorial

, Web-Frontend-Entwicklung】

Nachdem die Instanz gemountet wurde, kann das Element vm.$ verwendet werden el Besuchen. Wenn diese Option während der Instanziierung vorhanden ist, startet die Instanz sofort den Kompilierungsprozess. Andernfalls müssen Sie vm.$mount() explizit aufrufen, um die Kompilierung manuell zu starten.

🎜🎜Einfach ausgedrückt besteht die Rolle von el darin, anzugeben, in welches Element der Seite wir die von der aktuellen Vue-Komponente generierte Instanz einfügen möchten. Der Wert des el-Attributs kann die Zeichenfolge des CSS-Selektors oder direkt sein das entsprechende Elementobjekt. Und das el-Attribut kann nur konfiguriert werden, wenn new zum Generieren einer Instanz verwendet wird, und wir exportieren einfach ein Konfigurationsobjekt in die Komponente. Wenn el festgelegt ist, wird ein Fehler gemeldet. 🎜

// 错误使用方式，在组件中设置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'
})

🎜Werfen wir noch einmal einen Blick auf index.html im Projekt. 🎜

<!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>

🎜Drucken Sie vm.$el. Sie werden feststellen, dass die Instanz an das Element von el gemountet wurde: 🎜🎜🎜🎜🎜 (Freigabe von Lernvideos: 🎜Vuejs-Einführungs-Tutorial🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonWas ist die Abkürzung für el in vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

mvc 架构 css html String 字符串 JS 对象 dom 选择器

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist Vue Single Page und Multi-Page?Nächster Artikel：Was ist Vue Single Page und Multi-Page?

In Verbindung stehende Artikel

Mehr sehen