Vue.extend构造器的详解


Posted in Javascript onJuly 17, 2017

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开发的资料,欢迎大家搜索参阅,如有疑问请大家留言,共同进步,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue 实现走马灯效果
Oct 28 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
React Native实现进度条弹框的示例代码
Jul 17 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
javascript 禁止复制网页
2009/06/11 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Python实现Kmeans聚类算法
2020/06/10 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python类的实例化问题解决
2019/08/31 Python
python3 logging日志封装实例
2020/04/08 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
党员领导干部承诺书
2014/05/28 职场文书
甜品店创业计划书
2014/08/14 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
企业2014年度工作总结
2014/12/10 职场文书
工作经历证明范本
2015/06/15 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
深入浅析React中diff算法
2021/05/19 Javascript
react 项目中引入图片的几种方式
2021/06/02 Javascript
MySQL 数据类型详情
2021/11/11 MySQL