Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。
自定义无参数标签
我们想象一个需求,需求是这样的,要在博客页面多处显示作者的网名,并在网名上直接有链接地址。我们希望在html中只需要写<message></message>   ,这和自定义组件很像,但是他没有传递任何参数,只是个静态标签。
html  

<message></message>

js

var ms = Vue.extend({
template:`<div><span>{{name}}</span>-<span>{{sex}}</span></div>`,
data:function(){
return{
name:"小智",
sex:"男"
}
}
})
// 用$mount把Vue.extend提供的自定义组件挂载到message上
new ms().$mount('message')

Vue.extend提供自定义组件的构造器的更多相关文章

  1. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  2. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  3. vue19 组建 Vue.extend component、组件模版、动态组件

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

  4. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  5. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  6. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

  7. Vue第一个自定义组件:数字输入框(number-input)

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

  8. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

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

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

随机推荐

  1. CS229 - MachineLearning - 12 强化学习笔记

    Ng的机器学习课,课程资源:cs229-课件    网易公开课-视频 问题数学模型: 马尔科夫过程五元组{S.a.Psa.γ.R},分别对应 {状态.行为.状态s下做出a行为的概率.常数.回报}. 一 ...

  2. 使用commons-compress解压GBK格式winzip文件到UTF8,以及错误使用ZipArchiveInputStream读出来数据全是空的解决办法

    先上正确方法: 正确方式应该为,先创建一个ZipFile,然后对其entries做遍历,每一个entry其实就是一个文件或者文件夹,检测到文件夹的时候创建文件夹,其他情况创建文件,其中使用zipFil ...

  3. 两眼论&矩阵变现理论结合打造赚钱大模式

    两眼论&矩阵变现理论结合打造赚钱大模式 围棋有一个基本规则,就是一块棋有两只真眼,就是活棋. 围棋没有复杂的规则,它最有趣的地方是没有太多的规则和限制,由此演变出了大千世界,所以古人云“棋如人 ...

  4. SpringBoot整合redis哨兵主从服务

    前提环境: 主从配置 http://www.cnblogs.com/zwcry/p/9046207.html 哨兵配置 https://www.cnblogs.com/zwcry/p/9134721. ...

  5. excel vba 数据分析

    (Visual Basic Application) VBA(Visual Basic for Application)是Microsoft Office系列软件的内置编程语言,其语法结构与Visua ...

  6. GoldenGate 12.3 MA架构介绍系列(2) - 数据同步测试

    安装配置可参考上一篇:http://www.cnblogs.com/margiex/p/8071957.html 安装完成之后,会自动启动ServiceManager服务,此时,可以通过浏览器访问. ...

  7. ubuntu数据库安装配置

    感谢原作者 http://www.linuxidc.com/Linux/2016-12/138081.htm

  8. @RefreshScope 的作用

    让在application.properties里自定义的变量也能通过@Value 注解正常注入

  9. 数据分析之pandas02

    DataFrame 一.DataFrame DataFrame是一个[表格型]的数据结构.DataFrame又按一定顺序排列的多列数据组成,设计初衷是将Series的使用场景从一维扩展到多维.Date ...

  10. 结合sklearn的可视化工具Yellowbrick:超参与行为的可视化带来更优秀的实现

    https://blog.csdn.net/qq_34739497/article/details/80508262 Yellowbrick 是一套名为「Visualizers」的视觉诊断工具,它扩展 ...