Vue.extend实例扩展构造器

Vue.extend实例扩展构造器

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

实例：

• 我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。
• 我们希望在html中只需要写，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。

接下来我们就直接动手做这个小例子：
html代码很简单

	<author><author>
	//就这样一个简单的标签

js代码：

	var authorExtend = Vue.entend({
		template:'<p><a :href='authorUrl'>{{authorName}}</a></p>'
		data:function(){
			return{
					authorName:'聪明的小飞机' ,
					authorUrl:'http://baidu.com'
			}		
	}
	new authorExtend().$mount('author')  //挂载
	//扩展实例构造器需要挂载
})

• 当我们挂载完成后， 这个标签已经被 ’聪明的小飞机‘代替。
• 扩展构造器中的 data 是一个 函数，必须返回一个对象