Comment utiliser $mount pour monter manuellement une instance sur le DOM dans Vue

Vue est un framework JavaScript populaire largement utilisé dans le développement front-end. Il fournit de nombreuses fonctions et outils pratiques pour rendre le développement front-end plus facile et plus efficace. Dans le développement de Vue, nous devons souvent monter des instances sur le DOM pour obtenir le rendu et l'interaction des pages.

Vue fournit une méthode $mount pour monter manuellement une instance Vue sur un élément DOM spécifié. Cette méthode peut être appelée après la création de l'instance, ou vous pouvez passer l'option el dans le constructeur pour la monter automatiquement. Si l'option el n'est pas transmise, vous devez appeler manuellement la méthode $mount pour monter l'instance.

Jetons un coup d'œil à l'utilisation spécifique. Tout d'abord, créez un objet instance Vue dans le constructeur de l'instance Vue, puis appelez la méthode $mount pour le monter manuellement sur le DOM.

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

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

Dans le code ci-dessus, nous utilisons la nouvelle méthode Vue() pour créer un objet d'instance Vue vm et définir une variable de message dans son attribut data. Ensuite, nous appelons la méthode $mount pour monter manuellement cette instance sur le nœud DOM avec l'élément #app.

Si le nœud qui doit être monté manuellement n'est pas spécifié dans les options de l'instance, vous pouvez directement transmettre une référence ou une chaîne de sélection d'un nœud DOM dans la méthode $mount, et Vue l'utilisera comme nœud de montage.

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

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

Dans le code ci-dessus, nous obtenons d'abord la référence au nœud DOM avec l'application ID via la méthode document.getElementById(). Ensuite, transmettez directement la référence du nœud dans la méthode $mount, et Vue utilisera le nœud comme nœud de montage.

En plus de transmettre directement une référence de nœud, la méthode $mount peut également recevoir une chaîne de sélection en tant que paramètre pour spécifier le nœud DOM à monter.

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

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

Dans le code ci-dessus, nous passons le sélecteur #app en tant que paramètre à la méthode $mount, et Vue trouvera automatiquement le nœud DOM avec l'application ID comme nœud de montage. L'effet est le même que lors du passage direct de la référence du nœud DOM.

En résumé, la méthode $mount est une méthode dans Vue permettant de monter manuellement une instance sur un nœud DOM. Cette méthode peut être appelée après la création de l'instance, ou l'option el peut être passée dans le constructeur d'instance pour la monter automatiquement. . Si l'option el n'est pas transmise, vous devez appeler manuellement la méthode $mount pour monter l'instance. Dans la méthode $mount, vous pouvez transmettre directement la chaîne de référence ou de sélection du nœud DOM, et Vue l'utilisera comme nœud de montage.

Résumé :

• La méthode $mount est une méthode dans Vue permettant de monter manuellement des instances sur des nœuds DOM.
• Si l'option el n'est pas transmise, vous devez appeler manuellement la méthode $mount pour monter l'instance.
• La méthode $mount peut accepter une référence de nœud DOM ou une chaîne de sélection comme paramètre pour spécifier le nœud de montage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!