vue.extend与vue.component的区别和联系


Posted in Javascript onSeptember 19, 2018

如果大家只顾开发,对基础知识不了解,在今后的解决问题过程中,也是个大问题,今天小编抽空对基础概念给大家屡一下,用于大家日后学习。

Vue.extend({})简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器。

后可使用vue.component进行实例化、或使用new extendName().$mount(''+el)方式进行实例化(从而实现模拟组件)。

vue.extend与vue.component的区别和联系

Vue.component({})简述:不多介绍了。。。用于生成全局组件

使用:

1,Vue.component使用Vue.extend生成的构造函数:

vue.extend与vue.component的区别和联系

2,实例化构造函数从而模拟组件:

vue.extend与vue.component的区别和联系

vue.extend与vue.component的区别总结

在Vue.js中,Vue本身是一个constructor。

Vue.extend() 是一个继承于方法的 class,参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的 constructor。

而Vue.component()实际上是一个类似于Vue.directive() 和 Vue.filter()的注册方法,它的目的是给指定的一个constructor一个String类型的ID,

之后Vue.js可以把它用作模板,实际上当你直接传递选项给Vue.component()的时候,它会在背后调用Vue.extend()。

Vue.js支持两种不同的API模型:一种是基于类的,命令式的,Backbone 类型的API;另一种是基于标记语言的,声明式的,Web组件类型的API。

如果还是困惑的话,可以想象你是怎么创建通过new Image()或者 <img>标签创建 image元素的就知道了。

这两种方法都对指定的类型很有用,Vue.js提供这两者只是为了更好的灵活性。

下面看下vue.extend,new vue 和vue.component的区别

extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件

你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件

var apple = Vue.extend({ …. }) Vue.component(‘apple',apple)

你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({ components:{ apple:apple } })

Vue.component 你可以创建 ,也可以取组件 例如下

var apple = Vue.component(‘apple') 而new vue 是新建一个vue对象 所以可以理解为new vue < vue.extand < vue.component

Javascript 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
js实现简单的计算器功能
Jan 16 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 #Javascript
自己动手封装一个React Native多级联动
Sep 19 #Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 #Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 #Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 #Javascript
node.js环境搭建图文详解
Sep 19 #Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
使用Python求解最大公约数的实现方法
2015/08/20 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python 下载文件的多种方法汇总
2020/11/17 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
寄语是什么意思
2014/04/10 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
新店开张活动方案
2014/08/24 职场文书
国庆横幅标语
2014/10/08 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
伏羲庙导游词
2015/02/09 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
MySQL数据库查询之多表查询总结
2022/08/05 MySQL