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 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
js实现购物车功能
Jun 12 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
世界上第一台立体声收音机
2021/03/01 无线电
PHP网上调查系统
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
党性心得体会
2014/09/03 职场文书
创业计划书之面包店
2019/09/12 职场文书
创业计划书之甜品店
2019/09/18 职场文书
python基础之错误和异常处理
2021/10/24 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL