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 ...
随机推荐
- uva1452
这题说的是给了一个序列1到n然后你从1 位置开始数k个删除,直到最后每个数都被删除了.我们考虑1个数在被删除前后的位置,比如现在在i位置那么 回到删除当前的最后一个是 (i+k)L 了为删除前 的 个 ...
- 如何有规律的备份 WordPress 博客(转)
转自:http://blog.wpjam.com/m/backup-your-blog-regularly/ 我们都知道备份 WordPress 博客应该是规律性的操作,但是事实上往往我们都会因为 ...
- HDU1978How Many Ways 记忆化dfs+dp
/*记忆化dfs+dp dp[i][j]代表达到这个点的所有路的条数,那么所有到达终点的路的总数就是这dp[1][1]加上所有他所能到达的点的 所有路的总数 */ #include<stdio. ...
- Python笔记 #13# Pandas: Viewing Data
感觉很详细:数据分析:pandas 基础 import pandas as pd import numpy as np import matplotlib.pyplot as plt dates = ...
- nw.js node-webkit系列(17)怎样打包和分发你的应用
原文链接:http://blog.csdn.net/zeping891103/article/details/50790180
- 20145307陈俊达《网络对抗》Exp2 后门原理与实践
20145307陈俊达<网络对抗>Exp2 后门原理与实践 基础问题回答 例举你能想到的一个后门进入到你系统中的可能方式? 非正规网站下载的软件 脚本 或者游戏中附加的第三方插件 例举你知 ...
- linux第五周
第五周 给MenuOS增加time和time-asm命令 更新menu代码到最新版 在main函数中增加MenuConfig 增加对应的Time函数和TimeAsm函数 make rootfs 使用g ...
- ESXi上的固态硬盘识别为非SSD
启动ESXi的SSH服务 通过SSH远程连接ESXi主机 输入如下命令 # esxcli storage nmp device list #列出储存清单(SSD设备的“device na ...
- hdu_2048 错排问题
错排问题本质上就是一个动态规划问题,其状态转移方程为: 记d[n]为n个人错排情况的总数. 那么策略可以描述为:分析第n个人错排的可能情况: 1)前n-1个人满足错排的情况,那么第n个人加入后还要错排 ...
- UVa 11552 最小的块数(序列划分模型:状态设计)
https://vjudge.net/problem/UVA-11552 题意:输入一个正整数k和字符串S,字符串的长度保证为k的倍数.把S的字符按照从左到右的顺序每k个分成一组,每组之间可以任意重排 ...