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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
原生JavaScript实现留言板
Jan 10 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对称加密算法示例
2014/05/07 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
Python类属性的延迟计算
2016/10/22 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python人脸识别初探
2017/12/21 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python实现画循环圆
2019/11/23 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
用python写爬虫简单吗
2020/07/28 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
C#笔试题
2015/07/14 面试题
2014年小班元旦活动方案
2014/02/16 职场文书
高三家长寄语
2014/04/03 职场文书
学校节水倡议书
2015/04/29 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js