vue2.0的扩展extend

最新推荐文章于 2024-07-08 11:10:52 发布

mschange

最新推荐文章于 2024-07-08 11:10:52 发布

阅读量413

点赞数

本文链接：https://blog.csdn.net/Lschange/article/details/79390240

版权

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

我们以一个例子来进行说明：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<sites></sites>

<script type="text/javascript">
/*这里是创建exercise构造器*/
var exercise= Vue.extend({
template:"<p><a :href='links'>{{site}}</a></p>",
data:function(){
return{
site:'百度',
links:'http://www.baidu.com'
}
}
});
/*这里是挂载到我们创建的构造器上面*/

new exercise().$mount('sites');
new exercise().$mount('#sites');
new exercise().$mount('.sites');
</script>
</body>
</html>

需要注意的是 : new exercise().$mount(" 这里可以是标签，也可以是id选择器，也可以是类选择器 ")