Vue.extend提供自定义组件的构造器
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提供自定义组件的构造器的更多相关文章
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vue之全局自定义组件
在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...
- Vue图片验证码-自定义组件高级版
最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...
- Vue第一个自定义组件:数字输入框(number-input)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的自定义组件和组件传值
<div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...
- Vue.extend动态注册子组件
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...
随机推荐
- 【Hadoop学习之十二】MapReduce案例分析四-TF-IDF
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 概念TF-IDF(term fre ...
- 【转】SQLyog SSH 密钥登陆认证提示: No supported authentication methods available 解决方法
问题背景: 问题原因: SQLyog不支持非标准的的私钥格式 解决方案: 使用puttyGen重新导入原来的私钥,然后重新保存成PPK证书文件,最后用SQLyog加载该PPK文件即可. 效果截图: 原 ...
- svnrdump:E175000:SSL is not supported错误的解决
参考博客:https://www.cnblogs.com/jkko123/p/6358461.html 参考博客:https://blog.csdn.net/w171066/article/detai ...
- 初探AngularJs框架(三)
一.实现todoList的demo 功能很简单,提供一个文本框,用户输入回车后添加新条目.每个条目可以在待处理和处理中两个区域间切换,每个条目都可以被删除,大致的界面如下图所示: 二.处理逻辑 首先将 ...
- 转:C# 对委托的BeginInvoke,EndInvoke 及Control 的BeginInvoke,EndInvoke 的理解
转载自:http://www.cnblogs.com/easyfrog/p/3141269.html using System; using System.Collections.Generic; u ...
- WebSocket和long poll、ajax轮询的区别,ws协议测试
WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...
- Android百大框架排行榜
Android百大框架排行榜 15类Android通用流行框架 - 流风,飘然的风 - 博客园https://www.cnblogs.com/zdz8207/p/android-opensource- ...
- 注册页面的JSON响应方式详细分析(与前端页面交互方式之一)
控制器层 需求分析: 访问路径:`/user/reg.do` //自己根据功能需求设定的请求参数:`username=xx&password=xx&&phone=xx& ...
- Java连接数据库 #01# JDBC单线程适用
官方教程(包括 javase的基础部分):JDBC Basics 重新梳理.学习一下“Java连接数据库”相关的内容. 因为最开始没有认真学多线程和JDBC,一直在自己写的多线程程序中维持下面的错误写 ...
- mycat实现mysql数据库的垂直切分
在我们的工作中可能会遇到数据库的io瓶颈. 这个时候我们应该怎么办呢? 解决办法有很多,我们可以想到的为:数据库集群,主从复制,读写分离,数据库负载均衡,数据库的分库,分表.接下来我们写一下,数据库的 ...