Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist die Abkürzung für el in vue?

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

青灯夜游
Freigeben: 2022-12-13 18:12:25
Original
7367 Leute haben es durchsucht

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.

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

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'
})
Nach dem Login kopieren
🎜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>
Nach dem Login kopieren
🎜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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage