How to use $mount to manually mount an instance to the DOM in Vue

Vue is a popular JavaScript framework that is widely used in front-end development. It provides many convenient functions and tools to make front-end development easier and more efficient. In Vue development, we often need to mount instances to the DOM to achieve page rendering and interaction.

Vue provides a $mount method to manually mount a Vue instance to a specified DOM element. This method can be called after the instance is created, or you can pass the el option in the constructor to automatically mount it. If the el option is not passed in, you need to manually call the $mount method to mount the instance.

Let’s take a look at the specific usage. First, create a Vue instance object in the constructor of the Vue instance, and then call the $mount method to manually mount it on the DOM.

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

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

In the above code, we use the new Vue() method to create a Vue instance object vm and define a message variable in its data attribute. Next, we call the $mount method to manually mount this instance to the DOM node with the element #app.

If the node that needs to be manually mounted is not specified in the instance options, you can directly pass in a reference or selector string of a DOM node in the $mount method, and Vue will use it as the mounting node.

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

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

In the above code, we first obtain the reference to the DOM node with the ID app through the document.getElementById() method. Then, directly pass in the reference of the node in the $mount method, and Vue will use the node as the mounting node.

In addition to directly passing in a node reference, the $mount method can also receive a selector string as a parameter to specify the DOM node to be mounted.

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

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

In the above code, we pass the selector #app as a parameter to the $mount method, and Vue will automatically find the DOM node with the ID app as the mounting node. The effect is the same as when passing in the DOM node reference directly.

In summary, the $mount method is a method in Vue to manually mount an instance to a DOM node. This method can be called after the instance is created, or the el option can be passed in the instance constructor to automatically mount it. load. If the el option is not passed in, you need to manually call the $mount method to mount the instance. In the $mount method, you can directly pass in the reference or selector string of the DOM node, and Vue will use it as the mounting node.

Summary: The

• $mount method is a method in Vue to manually mount an instance to a DOM node.
• If the el option is not passed in, you need to manually call the $mount method to mount the instance.
• The $mount method can accept a DOM node reference or selector string as a parameter to specify the mount node.

The above is the detailed content of How to use $mount to manually mount an instance to the DOM in Vue. For more information, please follow other related articles on the PHP Chinese website!