Vue.extend构造器的详解
更新时间：2017年07月17日 11:12:13 作者：Dear_Mr
这篇文章主要介绍了Vue.extend构造器的详解的相关资料,需要的朋友可以参考下
Vue.extend构造器的详解
1.简单介绍
Vue.extend(options)
参数：对象
用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数
描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上
2.简单举例
自定义无参数标签
下面的代码中的author就是返回的“扩展实例构造器”
var author = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
}
});
对应的html如下：
<author></author>
此时的页面必然是没有任何效果的，因为扩展实例构造器还需要挂载，如下
new author().$mount('author');
使用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');
可以利用propsData传递参数
挂载在普通标签上
返回的扩展实例构造器的方式和上面还是一样的，只是html里不再是自定义标签，而是一个普通标签，比如div
<div id="author"></div>
new author().$mount('author');
其实对于同一个扩展构造器而言，它的每一个实例其实是可以挂载到不同的标签上的，比如我可以这样
new author().$mount('#author');
new author().$mount('author');
这两个标签的内容会一同显示，结果一样
以上就是对Vue.extend构造器的实例详解，本站还有很多关于vue js开发的资料，欢迎大家搜索参阅，如有疑问请大家留言，共同进步，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了Vue webpack的基本使用,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
在基于UniApp开发跨平台应用时,开发者通过特定语法来管理和加载应用程序的各种资源文件,如图片、字体、音频、视频等,在uni-app中,资源通常会被组织在项目的各个目录下,本文给大家介绍了uni-app资源引用的方法汇总,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue如何使用vue slot封装公共组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue.js实现数据响应的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue项目移动端实现ip输入框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了如何写好一个vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)
这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下2023-08-08
vue作为一个单页面应用,vuex作为它的状态管理工具,它至少是可以很好的保存这个token值,下面这篇文章主要给大家介绍了关于vue项目中存储与使用后端传递过来的token的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要为大家介绍了vue中多个文件下载实现打包压缩下载的发发示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论