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

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. Configure MongoDB Replica Set

    Table of Contents Introduction Requirements Create Replica Set Add Secondary Members Add an Arbiter ...

  2. adminlte+layui框架搭建1

    之前写过一篇layui-master的UI搭建,但是感觉layui-master缺少一些东西(前台页面不过多研究),比如说页面的皮肤.菜单.插件,当然我也希望layui的插件可以越来越多,支持多个浏览 ...

  3. Python闭包需要注意的问题

    定义   python中的闭包从表现形式上定义为:如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包(closure),也就是说内层函数引用了外层函数 ...

  4. FileReader 方法 实现预览图片

    FileReader 方法 方法名 参数 描述 abort none 中断读取 readAsBinaryString file(blob) 将文件读取为二进制码 readAsDataURL file( ...

  5. HDU_2102 A计划 【BFS】

    一.题目 HDU2102 二.题意分析 该题其实就是三位空间内的BFS,但比较简单的是,它设置了传送门,可以直接传送上去,需要注意的是 1.到了传送门的时候要重新考虑传送的点的三种情况. (1)若又是 ...

  6. html的第一个程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. C# 检查键盘是否唤醒到桌面上显示

    大概需要的win32函数 public static extern IntPtr FindWindow(string lpClassName, string lpWindowName)//返回值为具有 ...

  8. UVALive - 7061 区间DP初步

    题意:杀一只狼i会收到a[i]+b[i当前左边]+b[i当前右边]的攻击,求杀死所有狼的最小代价 #include<iostream> #include<algorithm> ...

  9. 计算机网络相关知识(http状态码 && 首部字段)

    计算机网络相关知识 计算机网络的知识还是非常重要的, 这里做一个简单的总结. 推荐阅读文章:http://www.cnblogs.com/TankXiao/archive/2012/02/13/234 ...

  10. xlua的自定义加载

    具体可以先看xlua的自定义加载的demo,那个用lamda表达式做的 我这个更好理解 主要是ReadFile2的结构问题,必须的写成这样