$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节点
vue组件
不管是想通过js的方式使用还是组件标签的形式访问都需要先创建组件构造器或者vue组件
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！