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实现添加及删除事件的方法小结
Aug 04 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
原生js实现日期选择插件
May 21 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
原生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的网址
2006/11/25 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于js中document.cookie全面解析
2017/09/14 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Django框架请求生命周期实现原理
2020/11/13 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
领导证婚人证婚词
2014/01/13 职场文书
校园广播稿500字
2014/02/04 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
目标责任书范文
2014/04/14 职场文书
政风行风评议整改方案
2014/09/15 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python