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.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 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版自动生成文章摘要
2008/07/23 PHP
golang与PHP输出excel示例
2016/07/22 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
JavaScript类的写法
2016/09/17 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
详解python运行三种方式
2019/05/13 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
详解python中的index函数用法
2019/08/06 Python
python同时遍历两个list用法说明
2020/05/02 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
自我评价的写作规则
2014/01/06 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
李强优秀员工观后感
2015/06/16 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL