一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固

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

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

   let Footer = Vuew.extend({
data(){
return {
footerName:'I CAN DO IT...'
}
},
template:'<div>{{footerName}}</div>'
});

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

使用:

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

 Vue.component('footer-view',Footer);

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

new Footer({
data:{
'...':''
}
}).$mount('my-footer')

完整代码:

<template>
<my-footer></my-footer>
</template>
<script>
let Footer = Vuew.extend({
data(){
return {
footerName:'I CAN DO IT...'
}
},
template:'<div>{{footerName}}</div>'
});
Vue.component('footer-view',Footer);
// new Footer({
// data:{
// '...':''
// }
// }).$mount('my-footer')
</script>

  若有什么错误,欢迎指正。。。

vue.extend与vue.component的区别和联系的更多相关文章

  1. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  2. Vue vue.extend 和vue.component 两则之间的区别

    Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...

  3. vue.extend和vue.component的区别

    vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...

  4. Vue官方文档Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解

    一.Vue.extend({}). 看官网文档介绍,Vue.extend({})返回一个Vue的子类,那么这个Vue子类是啥玩意儿呢?我直观感觉它就是创建出一个组件而已啊,那么它又和Vue.compo ...

  5. Vue.extend和Vue.component的联系与差异

    extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...

  6. Vue.mixin Vue.extend(Vue.component)的原理与区别

    1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...

  7. vue extend 的基本使用

    vue.extend 局部注册 的应用2 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({components: f ...

  8. Vue.extend动态注册子组件

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...

  9. 【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略

    大体思路 (三)  1. 子类父类  2.Vue.extend()      //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app' ...

随机推荐

  1. JavaWeb学习笔记(五)—— request

    一.request概述 request是Servlet.service()方法的一个参数,类型为javax.servlet.http.HttpServletRequest.在客户端发出每个请求时,服务 ...

  2. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...

  3. springboot(三)-使用JSP

    Springboot的默认视图支持是Thymeleaf.这里先不谈,这么优秀的框架怎么可能不能使用JSP呢?不允许的. 那么需要添加对jsp的支持. pom.xml 在pom.xml文件中添加依赖 & ...

  4. Java static{}语句块详解

    [转自] http://blog.csdn.net/lubiaopan/article/details/4802430 static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一 ...

  5. Oracle KEEP的用法

    [摘录自] http://blog.itpub.net/12932950/viewspace-687036/ http://flyfx.iteye.com/blog/1994993 聚合函数MIN, ...

  6. (转)求有向图的强连通分量个数(kosaraju算法)

    有向图的连通分量的求解思路 kosaraju算法 逛了很多博客,感觉都很难懂,终于找到一篇能看懂的,摘要记录一下 原博客https://www.cnblogs.com/nullzx/p/6437926 ...

  7. python 文件处理(基础字符)

    基于字符read & write 最基本的文件操作当然就是在文件中读写数据.这也是很容易掌握的.现在打开一个文件以进行写操作: 1. fileHandle = open ( 'test.txt ...

  8. [V1-Team] WEDO创意论坛技术规格说明书

    WEDO 创意论坛技术规格说明书 0x0 文档版本 版本号 说明 v1.0 初步确定技术路线 附Github仓库:WEDO 0x1 技术说明 1. 前端框架   在主流的前端框架中,我们调研了Vue. ...

  9. 切换myEclipse工作空间后设置,myEclipse添加注释/设置豆沙背景颜色/调节字体大小

    一.添加注释 操作位置: 注释规范 Files/** * @文件名称: ${file_name} * @文件路径: ${package_name} * @功能描述: ${todo} * @作者: ${ ...

  10. pyspark 读写csv、json文件

    from pyspark import SparkContext,SparkConf import os from pyspark.sql.session import SparkSession de ...