slot的使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> </head>
<body>
<div id="box">
<rk-form action="register.php" method="post" enctype="application/x-www-form-urlencoded">
<rk-panel slot="content">
<h4 slot="paneltitle">注册</h4>
<rk-input itype="text" ititle="用户" iplace="请输入用户" iname="username" slot="panelcontent"></rk-input>
<rk-input itype="password" ititle="密码" iplace="请输入密码" iname="password" slot="panelcontent"></rk-input>
<rk-input itype="password" ititle="确认密码" iplace="请再输入一次密码" iname="password2" slot="panelcontent"></rk-input>
<rk-input itype="email" ititle="邮箱" iplace="请输入邮箱" iname="email" slot="panelcontent"></rk-input>
<rk-input itype="text" ititle="电话" iplace="请输入电话" iname="phone" slot="panelcontent"></rk-input> <rk-button btitle="注册" btype="submit" slot="panelButton"></rk-button>
<rk-button btitle="重置" btype="reset" slot="panelButton"></rk-button>
</rk-panel>
</rk-form>
</div> <script type="text/x-template" id="form">
<form :action="action" :method="method" :enctype="enctype">
<slot name="content">表单内容</slot>
</form>
</script> <script type="text/x-template" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<slot name="paneltitle">panel标题</slot>
</div>
</div> <div class="panel-body">
<slot name="panelcontent">panel主体</slot> <slot name="panelButton">panel按钮</slot>
</div>
</div>
</script> <script type="text/x-template" id="rkInput">
<div class="form-group">
<label for="" class="control-label col-sm-2">{{ititle}}</label>
<div class="form-group col-sm-9">
<input :type="itype" :name="iname" class="form-control" :placeholder="iplace">
</div>
</div>
</script> <script type="text/x-template" id="rkButton">
<span class="form-group text-right col-sm-1">
<button class="btn btn-primary" :type="btype">{{btitle}}</button>
</span>
</script> <script type="text/javascript"> var rkForm = {
props:['action','method','enctype'],
template:'#form'
}; var rkPanel = {
template:'#panel'
}; var rkInput = {
props:['itype','ititle','iplace','iname'],
template:'#rkInput',
}; var rkButton = {
props:['btitle','btype'],
template:'#rkButton',
}; var app = new Vue({
el:'#box',
components:{rkForm,rkPanel,rkInput,rkButton},
});
</script>
</body>
</html>
效果如下:
slot的使用实例的更多相关文章
- Inside Qt Series (全集)
Inside Qt 系列 QObject这个 class 是 QT 对象模型的核心,绝大部分的 QT 类都是从这个类继承而来.这个模型的中心特征就是一个叫做信号和槽(signaland slot)的机 ...
- 大厂们的 redis 集群方案
redis 集群方案主要有两类,一是使用类 codis 的架构,按组划分,实例之间互相独立: 另一套是基于官方的 redis cluster 的方案:下面分别聊聊这两种方案: 类 codis 架构 这 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- Core官方DI解析(3)-ServiceCallSite.md
上一篇说过在整个DI框架中IServiceProviderEngine是核心,但是如果直接看IServiceProviderEngine派生类其实看不出也没什么东西,因为这个类型其实都是调用的其它对象 ...
- 如何搭建高可用redis架构?
如何搭建高可用redis架构? 温国兵 架构师小秘圈 昨天 作者:温国兵,曾任职于酷狗音乐,现为三七互娱 DBA.目前主要关注领域:数据库自动化运维.高可用架构设计.数据库安全.海量数据解决方案.以及 ...
- 一、java虚拟机内存区域
内存区域 java虚拟机在java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.java虚拟机规范将JVM管理的内存分为:程序计数器.本地方法栈.Java虚拟机栈.方法区.Java堆.如下 ...
- Redis学习之路(四)之Redis集群
[toc] #Redis集群 1.Redis Cluster简介 Redis Cluster为Redis官方提供的一种分布式集群解决方案.它支持在线节点增加和减少. 集群中的节点角色可能是主,也可能是 ...
- 如何构建 Redis 高可用架构?
温国兵 民工哥技术之路 今天 1 .题记 Redis 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API. 如今,互 ...
- redis集群热扩展(基于4.0.9)
1:环境说明,首先说一下要做的事情,我们要迁移redis集群槽位,现有redis集群环境如下 我们看一下集群的基本信息: > cluster nodes 8ea64a0049e0b193296a ...
随机推荐
- FTP服务器配置实践
1.为linux系统分配IP地址:192.168.X.1/24,并重启网络服务,客户端XP系统IP地址为:192.168.X.2/24, 2.查询本机是否安装了vsftpd服务,结果显示未安装,挂载光 ...
- ZW云推客即将登场
ZW云推客即将登场 即"4K云字库"框架文件发布后,ZW团队即将发布一全功能的:ZW云推客系统. ZW云推客系统,是原zBrow"百万社区营销系统".&qu ...
- jmeter dubbo接口测试
说在前面,测试熔断降级系统时,要求测试一下对应的dubbo接口性能 1.安装Jmeter 2.将dubbo依赖包下载好放在jmeter路径/lib/ext下, 3.打开jmeter,测试计划下新建线程 ...
- Flask添加翻页功能(非sqlalchemy)
最近做flask的项目,需要增加翻页的功能,网上找的教程都是结合sqlalchemy的,可是我用的不是sqlalchemy,肿木办呢? 以下是我的做法 一.前端 1.传递页码 前端我使用ajax提交表 ...
- c++第二十六天
p131~p135: 1.除非必要否则不使用后缀加加(减减),会有额外的性能开销. 2.混用解引用和递增运算符.*pointer++,后缀运算符优先于解引用运算符. 3.运算对象可按任意顺序求值,即使 ...
- SQL优化之limit 1
在某些情况下,如果明知道查询结果只有一个,SQL语句中使用LIMIT 1会提高查询效率. 例如下面的用户表(主键id,邮箱,密码): create table t_user( id int prim ...
- 20145104张家明 《Java程序设计》第4周学习总结
20145104张家明 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 1.继承的定义及目的 面向对象中,子类继承父类,避免重复的行为定义.不过并非为了避免重复定义行为就使用 ...
- 20145204《Java程序设计》第10周学习总结
网络编程 网络编程:在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时,大部分的程序设计 ...
- P4 PI库安装
repo:Github PI P4Runtime - a control plane framework and tools for the P4 programming language 这个是P4 ...
- Codeforces Round #413, rated, Div. 1 + Div. 2 C. Fountains(贪心 or 树状数组)
http://codeforces.com/contest/799/problem/C 题意: 有n做花园,有人有c个硬币,d个钻石 (2 ≤ n ≤ 100 000, 0 ≤ c, d ≤ 100 ...