Vue2.0 - 构造器的延伸 Vue.extend

时间 2019-12-09

标签 vue2.0 vue 构造延伸 vue.extend extend 繁體版

原文原文链接

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

<!DOCTYPE html>html

<head>

<title>vue.extend-扩展实例构造器</title>

</head>

<body>

<h1>vue.extend-扩展实例构造器</h1>

<hr>

var authorExtend = Vue.extend({

template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",

data:function(){

return{

authorName:'JSPang',

authorUrl:'http://www.jspang.com'

}

});

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

</script>

</body>

</html>

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

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