So verwenden Sie $mount, um eine Instanz manuell im DOM in Vue bereitzustellen

Vue ist ein beliebtes JavaScript-Framework, das häufig in der Front-End-Entwicklung verwendet wird. Es bietet viele praktische Funktionen und Tools, um die Front-End-Entwicklung einfacher und effizienter zu machen. Bei der Vue-Entwicklung müssen wir häufig Instanzen im DOM bereitstellen, um Seitenrendering und Interaktion zu erreichen.

Vue bietet eine $mount-Methode zum manuellen Mounten einer Vue-Instanz in einem angegebenen DOM-Element. Diese Methode kann aufgerufen werden, nachdem die Instanz erstellt wurde, oder Sie können die Option el im Konstruktor übergeben, um sie automatisch bereitzustellen. Wenn die Option el nicht übergeben wird, müssen Sie die Methode $mount manuell aufrufen, um die Instanz bereitzustellen.

Werfen wir einen Blick auf die spezifische Verwendung. Erstellen Sie zunächst ein Vue-Instanzobjekt im Konstruktor der Vue-Instanz und rufen Sie dann die Methode $mount auf, um es manuell im DOM bereitzustellen.

// 定义Vue实例对象
var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});

// 手动挂载实例到指定元素
vm.$mount('#app');

Im obigen Code verwenden wir die neue Vue()-Methode, um ein Vue-Instanzobjekt vm zu erstellen und eine Nachrichtenvariable in seinem Datenattribut zu definieren. Als nächstes rufen wir die Methode $mount auf, um diese Instanz manuell mit dem Element #app auf dem DOM-Knoten bereitzustellen.

Wenn der Knoten, der manuell gemountet werden muss, nicht in den Instanzoptionen angegeben ist, können Sie direkt eine Referenz oder Selektorzeichenfolge eines DOM-Knotens in der $mount-Methode übergeben, und Vue verwendet ihn als Montageknoten.

// 获取DOM节点
var app = document.getElementById('app');

// 手动挂载Vue实例到指定的DOM节点
vm.$mount(app);

Im obigen Code erhalten wir zunächst den Verweis auf den DOM-Knoten mit der ID-App über die Methode document.getElementById(). Übergeben Sie dann direkt die Referenz des Knotens in der $mount-Methode, und Vue verwendet den Knoten als Montageknoten.

Zusätzlich zur direkten Übergabe einer Knotenreferenz kann die $mount-Methode auch eine Selektorzeichenfolge als Parameter empfangen, um den zu mountenden DOM-Knoten anzugeben.

// 通过选择器获取DOM节点
var app = '#app';

// 手动挂载Vue实例到指定的DOM节点
vm.$mount(app);

Im obigen Code übergeben wir den Selektor #app als Parameter an die $mount-Methode und Vue findet automatisch den DOM-Knoten mit der ID-App als Montageknoten. Der Effekt ist derselbe wie bei der direkten Übergabe der DOM-Knotenreferenz.

Zusammenfassend ist die $mount-Methode eine Methode in Vue zum manuellen Mounten einer Instanz auf einem DOM-Knoten. Diese Methode kann aufgerufen werden, nachdem die Instanz erstellt wurde, oder die Option el kann im Instanzkonstruktor übergeben werden, um sie automatisch zu mounten . Wenn die Option el nicht übergeben wird, müssen Sie die Methode $mount manuell aufrufen, um die Instanz bereitzustellen. In der $mount-Methode können Sie die Referenz- oder Auswahlzeichenfolge des DOM-Knotens direkt übergeben, und Vue verwendet ihn als Montageknoten.

Zusammenfassung:

• Die $mount-Methode ist eine Methode in Vue zum manuellen Mounten von Instanzen auf DOM-Knoten.
• Wenn die Option el nicht übergeben wird, müssen Sie die Methode $mount manuell aufrufen, um die Instanz bereitzustellen.
• Die $mount-Methode kann eine DOM-Knotenreferenz oder eine Selektorzeichenfolge als Parameter akzeptieren, um den Mount-Knoten anzugeben.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie $mount, um eine Instanz manuell im DOM in Vue bereitzustellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!