学习笔记(12):Vue2.x从入门到实战-Vue.extend构造器的延伸

立即学习:https://edu.csdn.net/course/play/6823/135322?utm_source=blogtoedu

Vue extend构造器的延伸

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

没有学习组件，所以现在只用与组件无关的用途

HTML

<author></author>

用Vue.extend编写一个扩展实例构造器

var authorExtend=Vue.extend({
        template:'<p><a :href="msgUrl" target="_blank">{{msg}}</a></p>',
        data:function () {
            return{
                msg:'Vue extend',
                msgUrl:'http://www.69aza.com'
            }
        }
    });

这时的<author></author>标签是不起作用的，因为扩展实例构造器是需要挂载

new authorExtend().$mount('author');

还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的方法，来进行挂载就可以了。

new authorExtend().$mount('#author');

新手一枚，若有不足，请指正！