前言
vue菜鸟一枚,对vue.extend、 new vue()、component、render比较懵逼,理不清关系,用法,查看了一些博文后,这里记录一下自己一点浅显的理解。
1.vue.extend、 new vue()
vue.extend() 是new vue() 的一个子类。用法都一样,都是实例化一个对象,然后是挂载到到dom元素上。
注意:
(1)挂载到dom元素,其次vue.extend()里面的的HTML模板**(template:“
hello
”)**会覆盖被挂载的那个dom元素。 new vue()里面的render的模板也会覆盖被挂载的那个dom元素。(2)vue.extend()中的data是一个函数且返回一个对象。
data:function(){
return { }
}
2.vue.component全局注册和局部注册components
通过component注册组件不会覆盖原有的dom元素,直接把标签放到相应元素内就可使用。
下面进行实例对比
1.component注册使用
2.new 实例().$mount() 被挂在的元素会被覆盖
3.new vue()挂载到组件, render渲染的组件会覆盖被挂在的dom元素
注意
1.vue.extend()完了需要操作new 实例().$mount() ,才能挂载。
2.图片中的两种挂载方法
延伸:vue.extend()的传参propsData
var author = Vue.extend({
template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
},
props : ['name']
});
new author({propsData: {name : 'dear_mr'}}).$mount('#author');
参考:
https://blog.csdn.net/dkr380205984/article/details/80116024
https://blog.csdn.net/Dear_Mr/article/details/72627214