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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
childNodes.length与children.length的区别
May 14 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
AngularJS入门之动画
Jul 27 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
js的event详解。
2006/09/06 Javascript
JS判定是否原生方法
2013/07/22 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python使用mysql的两种使用方式
2018/03/07 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Django视图扩展类知识点详解
2019/10/25 Python
wxpython绘制音频效果
2019/11/18 Python
python 类之间的参数传递方式
2019/12/20 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
物业经理求职自我评价
2013/09/22 职场文书
大学旷课检讨书
2014/01/28 职场文书
料理师求职信
2014/01/30 职场文书
团组织推优材料
2014/12/29 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
篮球赛新闻稿
2015/07/17 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL