$mount Basic use

// C.js
import Vue from 'vue'
export default {
  handle () {
    let cpnConstructor = Vue.extend({
      data () {
        return {
          msg: 'hello vue'
      render () {
        return (
          <div id="cpn">
          </div>)}})let obj = new cpnConstructor();
    console.log('cpnConstructor.$mount()=====', obj.$mount());
    console.log('cpnConstructor.$mount().$el=======', obj.$mount().$el);
    // obj.$mount() renders the render template of the obj instance object out of the document
    // obj.$el refers to the template DOM node in the render function

// main.js
import Vue from "vue";
import c from './components/C.js'
new Vue({
  created () {
Copy the code
<! DOCTYPEhtml>
<html lang="en">

  <meta charset="utf-8">

  <div id="app"></div>

Copy the code



Excerpt from the official website:

If the Vue instance does not receive the EL option when instantiated, it is unmounted and has no associated DOM elements. An unmounted instance can be manually mounted using vm.$mount().

If the elementOrSelector parameter is not provided, the template will be rendered as an element outside of the document, and you must insert it into the document using the native DOM API.

This method returns the instance itself, so other instance methods can be chain-called

var MyComponent = Vue.extend({
  template: '
}) // Create and mount to #app (instead of #app) new MyComponent().$mount('#app') / / same as above new MyComponent({ el: '#app' }) // Alternatively, render out of the document and mount it later var component = new MyComponent().$mount() document.getElementById('app').appendChild(component.$el) Copy the code

$mount() tips:

$mount() compiles the template pointed to by the component’s EL property or the template defined by template into the render function; Mount the render template to the DOM element specified by $mount(elementOrSelector). If the $mount function parameter is not specified, the Render template will be rendered as an element outside the document, and we must insert it into the document using the native DOM API.

Note that $mount() essentially wants to mount the Render template into the dom; And the mount process is replacement


$el specifically refers to the render template DOM node of the render function

$el and the template

If the el and template attributes are specified in the component, the template template replaces the node specified by el.

Vue components

Whether you want to use it as js or access it as a component tag, you need to create a component constructor or a VUE component