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 (组件的选项对象) ...
随机推荐
- 20155228 2016-2017-2 《Java程序设计》第9周学习总结
20155228 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 整合数据库 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则 ...
- 通过Hive将数据写入到ElasticSearch
我在<使用Hive读取ElasticSearch中的数据>文章中介绍了如何使用Hive读取ElasticSearch中的数据,本文将接着上文继续介绍如何使用Hive将数据写入到Elasti ...
- 20165215 2017-2018-2《Java程序设计》第一周学习总结
20165215 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 跟随网课学习了<Java2 实用教程>的第一章,进行了基础的编译练习 在Ubun ...
- TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络
TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络
- Codeforce 834A - The Useless Toy
Walking through the streets of Marshmallow City, Slastyona have spotted some merchants selling a kin ...
- P1216 数字金字塔
P1216 数字金字塔 我们可以用 f [ i ] [ j ] 表示从(1,1)出发,到达(i,j)的最大权值和. (i , j)可以由(i - 1 , j)或者(i - 1 , j - 1)转化来 ...
- lnmp 安装redis-最全
一. 安装redis 1.下载,解压,编译 $ wget http://download.redis.io/releases/redis-3.2.8.tar.gz $ tar -xzf redis-3 ...
- selenium使用location定位元素坐标偏差
python+selenium+Chromedriver使用location定位元素坐标偏差使用xpath定位元素,用.location获取坐标值,截取网页截图的一部分出现偏差. 之所以会出现这个坐标 ...
- centos6编译安装mysql5.5
常规编译安装:./configure;make;make install centos 6.5,安装mysql 5.5.54,所需安装包cmake-2.8.8.tar.gz.mysql-5.5.54. ...
- Windows环境下ELK平台的搭建
.背景 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.经常分析日志可以了解服务器的负荷,性能安全性,从而及时采 ...