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. 【转】Loadrunder场景设计篇——添加windows Resource计数器和指标说明

    转至:https://www.cnblogs.com/langhuagungun/p/8488270.html Loadrunder场景设计篇——添加windows Resource计数器和指标说明 ...

  2. [openjudge-动态规划]摘花生

    题目描述 描述 Hello Kitty 想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来.地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生 ...

  3. [资讯] NFC有什么作用。小米手机3NFC解读

    在近几年的智能手机市场,NFC成了Android高端手机产品的标准配置,无论是Android还是Windows Phone阵营,有越来越多的厂商也开始为自己的产品加入NFC功能.而小米最新的旗舰产品— ...

  4. .NET 常用ORM之iBatis

    ibatis 一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目,到后面发展的版本叫MyBatis但都是指的同一个东西.最初侧重 ...

  5. ORM for Net主流框架汇总

    ORM框架:Object/Relation Mapping(对象/关系 映射)的缩写,易于理解的模型化数据的方法.简单的说就是把数据库的关系型数据类型转换为用对象型程序控制的框架类型. 框架优缺点分析 ...

  6. Django框架----权限管理(设计分析以及具体细节)

    说起权限我们大家都知道,不一样的角色会有不一样的权限.比如就像学生管理系统一样,管理员,老师,学生之间的权限都是不一样的,那么展示的页面也是不一样的.所以,我们现在来看看具体操作. 目标:生成一个独立 ...

  7. hdu some problems in Multi-University Training Contest

    hdu 6103 Kirinriki #include<bits/stdc++.h> using namespace std; int n,m,ans; ]; void doit(int ...

  8. java.lang.IllegalStateException: Failed to check the status of the service

    java.lang.IllegalStateException: Failed to check the status of the service com.pinyougou.sellergoods ...

  9. 虚拟机下Linux系统如何设置IP地址

    虚拟机下Linux系统设置IP地址三种方法 文章来源:https://jingyan.baidu.com/article/ea24bc399ffeb9da62b3318f.html 工具/原料   V ...

  10. Yii1使用Gii生成模块实现CURD

    Yii里Gii的强大就不用说了,可以快速生成模块的Model.Controller来开发.要使用Gii,首先你需要创建好操作的数据表. 第一步:创建数据表 CREATE TABLE `t_knowle ...