Manual Mount Operation. $mount of 'app' in vue

In the Vue constructor, you need to configure 1 el property, and if there is no el property, you can mount it using. $mount ('# app').

The el properties are configured:

new Vue({
 el:"#app",
 router
});

If the el property is not configured, you can use manually mounting $mount ("# app")

new Vue({
 router
}).$mount('#app');

var vm = new Vue({
 router
});
vm.$mount('#app');

Additional knowledge: Vue manually mounts components $mount (), implements js inserts components, replaces components

Sometimes in the project, it is necessary to insert an vue component with js in the page. At this time, it is necessary to manually mount vue $mount and Vue official website $mount ()

Manual mount limit: Only observed in instances created by new.

1. First introduce the components you want to insert and Vue

import ShowBox from './show/ShowBox';

import Vue from "vue";

2. Manual mount, js insert component

// Manual mount, which is required to be available, showBoxInstance Is a manually mounted component instance 
let myShowBox = Vue.extend(ShowBox)
let showBoxInstance = new myShowBox().$mount()
 
//setData Is in the component instance to be inserted 1 Method, the content of the method is given to the data Data assignment for data binding display of components 
showBoxInstance .setData(this.index);
 
// Invoke the method that inserts in front of adjacent elements , No. 1 1 Parameters are introduced into the component dom Object, the 2 Parameters are targets dom Object 
this.insertBefore(showBoxInstance.$el, target.$el);

3. You can also replace the target element directly, and js replaces the component

// It can also be replaced directly, target For the to be replaced dom Object, you can directly replace the target with the component dom
let myShowBox = Vue.extend(ShowBox)
let showBoxInstance = new myShowBox ().$mount(target.$el);