$mount基本使用

// C.js
import Vue from 'vue'
export default {
  handle () {
    let cpnConstructor = Vue.extend({
      data () {
        return {
          msg: 'hello vue'
        }
      },
      render () {
        return (
          <div id="cpn">
            {this.msg}
          </div>
        )
      },
    })

    let obj = new cpnConstructor();
    console.log('cpnConstructor.$mount()=====', obj.$mount());
    console.log('cpnConstructor.$mount().$el=======', obj.$mount().$el);
    // obj.$mount()是将obj实例对象的render模板渲染到文档外，返回值还是obj实例对象
    // obj.$el指的是render函数中模板dom节点
    document.body.appendChild(obj.$mount().$el)
  }
}

// main.js
import Vue from "vue";
import c from './components/C.js'
new Vue({
  created () {
    c.handle();
  }
}).$mount("#app");

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

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

</html>

心得

$mount()

官网摘录：

如果 Vue 实例在实例化时没有收到el 选项，则它处于未挂载状态，没有关联的DOM元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

关于$mount()心得:

$mount() 会将组件el属性指向的模板或者template定义的模板编译成render渲染函数；再将渲染模板挂载到$mount(elementOrSelector) 参数elementOrSelector指定的dom元素上；如果没有指定$mount函数参数，那么render模板将被渲染为文档之外的的元素，并且我们必须使用原生 DOM API 把它插入文档中。

注意$mount()本质是想将render渲染模板挂载到文档dom中；并且挂载的过程是替换

$el

$el特指的是render函数的渲染模板dom节点

$el和template

如果在组件中指定了el属性和template属性，那么template模板会将el指定的节点替换掉。

vue组件

不管是想通过js的方式使用还是组件标签的形式访问都需要先创建组件构造器或者vue组件

$mount & $el & template心得

$mount基本使用

心得

$mount()

$el

$el和template

vue组件