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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
Java文件和目录(IO)操作
2014/08/26 面试题
2014道德模范事迹材料
2014/02/16 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
临时租车协议范本
2014/09/23 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS