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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
javascript实现拖放效果
Dec 16 Javascript
jQuery限制图片大小的方法
May 25 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
把77A收信机改造成收音机
2021/03/02 无线电
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
如何对python的字典进行排序
2020/06/19 Python
python打包多类型文件的操作方法
2020/09/21 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
委托公证书
2014/04/08 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
国庆促销活动总结
2014/08/29 职场文书
学生偷窃检讨书
2014/09/25 职场文书