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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
Nuxt.js实战详解
Jan 18 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
electron 安装,调试,打包的具体使用
Nov 06 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
python中的协程深入理解
2019/06/10 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
pandas 空数据处理方法详解
2019/11/02 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
培训主管的职业生涯规划
2014/03/06 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
体育专业自荐书
2014/05/29 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python