vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固
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的区别和联系的更多相关文章
- 前端框架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 ...
- Vue vue.extend 和vue.component 两则之间的区别
Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- Vue官方文档Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解
一.Vue.extend({}). 看官网文档介绍,Vue.extend({})返回一个Vue的子类,那么这个Vue子类是啥玩意儿呢?我直观感觉它就是创建出一个组件而已啊,那么它又和Vue.compo ...
- Vue.extend和Vue.component的联系与差异
extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...
- Vue.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- vue extend 的基本使用
vue.extend 局部注册 的应用2 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({components: f ...
- Vue.extend动态注册子组件
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...
- 【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略
大体思路 (三) 1. 子类父类 2.Vue.extend() //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app' ...
随机推荐
- JavaWeb学习笔记(五)—— request
一.request概述 request是Servlet.service()方法的一个参数,类型为javax.servlet.http.HttpServletRequest.在客户端发出每个请求时,服务 ...
- Day45--js基本小结
JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...
- springboot(三)-使用JSP
Springboot的默认视图支持是Thymeleaf.这里先不谈,这么优秀的框架怎么可能不能使用JSP呢?不允许的. 那么需要添加对jsp的支持. pom.xml 在pom.xml文件中添加依赖 & ...
- Java static{}语句块详解
[转自] http://blog.csdn.net/lubiaopan/article/details/4802430 static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一 ...
- Oracle KEEP的用法
[摘录自] http://blog.itpub.net/12932950/viewspace-687036/ http://flyfx.iteye.com/blog/1994993 聚合函数MIN, ...
- (转)求有向图的强连通分量个数(kosaraju算法)
有向图的连通分量的求解思路 kosaraju算法 逛了很多博客,感觉都很难懂,终于找到一篇能看懂的,摘要记录一下 原博客https://www.cnblogs.com/nullzx/p/6437926 ...
- python 文件处理(基础字符)
基于字符read & write 最基本的文件操作当然就是在文件中读写数据.这也是很容易掌握的.现在打开一个文件以进行写操作: 1. fileHandle = open ( 'test.txt ...
- [V1-Team] WEDO创意论坛技术规格说明书
WEDO 创意论坛技术规格说明书 0x0 文档版本 版本号 说明 v1.0 初步确定技术路线 附Github仓库:WEDO 0x1 技术说明 1. 前端框架 在主流的前端框架中,我们调研了Vue. ...
- 切换myEclipse工作空间后设置,myEclipse添加注释/设置豆沙背景颜色/调节字体大小
一.添加注释 操作位置: 注释规范 Files/** * @文件名称: ${file_name} * @文件路径: ${package_name} * @功能描述: ${todo} * @作者: ${ ...
- pyspark 读写csv、json文件
from pyspark import SparkContext,SparkConf import os from pyspark.sql.session import SparkSession de ...