<!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的使用实例的更多相关文章

  1. Inside Qt Series （全集）

    Inside Qt 系列 QObject这个 class 是 QT 对象模型的核心,绝大部分的 QT 类都是从这个类继承而来.这个模型的中心特征就是一个叫做信号和槽(signaland slot)的机 ...

  2. 大厂们的 redis 集群方案

    redis 集群方案主要有两类,一是使用类 codis 的架构,按组划分,实例之间互相独立: 另一套是基于官方的 redis cluster 的方案:下面分别聊聊这两种方案: 类 codis 架构 这 ...

  3. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  4. Core官方DI解析(3)-ServiceCallSite.md

    上一篇说过在整个DI框架中IServiceProviderEngine是核心,但是如果直接看IServiceProviderEngine派生类其实看不出也没什么东西,因为这个类型其实都是调用的其它对象 ...

  5. 如何搭建高可用redis架构？

    如何搭建高可用redis架构? 温国兵 架构师小秘圈 昨天 作者:温国兵,曾任职于酷狗音乐,现为三七互娱 DBA.目前主要关注领域:数据库自动化运维.高可用架构设计.数据库安全.海量数据解决方案.以及 ...

  6. 一、java虚拟机内存区域

    内存区域 java虚拟机在java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.java虚拟机规范将JVM管理的内存分为:程序计数器.本地方法栈.Java虚拟机栈.方法区.Java堆.如下 ...

  7. Redis学习之路（四）之Redis集群

    [toc] #Redis集群 1.Redis Cluster简介 Redis Cluster为Redis官方提供的一种分布式集群解决方案.它支持在线节点增加和减少. 集群中的节点角色可能是主,也可能是 ...

  8. 如何构建 Redis 高可用架构？

    温国兵 民工哥技术之路 今天 1 .题记 Redis 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API. 如今,互 ...

  9. redis集群热扩展（基于4.0.9）

    1:环境说明,首先说一下要做的事情,我们要迁移redis集群槽位,现有redis集群环境如下 我们看一下集群的基本信息: > cluster nodes 8ea64a0049e0b193296a ...

随机推荐

  1. 92. Reverse Linked List II（链表部分反转）

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  2. Linux基础入门（实验楼实验）

    实验一 Linux系统简介 Linux和windows.Mac OS一样是一种操作系统.最早流行起来的操作系统是UNIX,但由于其过度商业化,价格昂贵,因此在校园里人们大多选择MINIX.1991年, ...

  3. 20145221 《Java程序设计》课程总结

    20145221 <Java程序设计>课程总结 每周读书笔记链接汇总 Atom使用心得 - 21世纪的编辑器 网络安全攻防学习平台 - 基础关 Java实现:数据结构之排序 2014522 ...

  4. Environment.NewLine

    https://docs.microsoft.com/en-us/dotnet/api/system.environment.newline?view=netframework-4.7.2 https ...

  5. LA 7277 Landscaping（最小割）

    https://vjudge.net/problem/UVALive-7277 题意: 给出一个n*m的地图,.代表低坡,#代表高坡. 现在有n+m辆车分别从上端和左端出发,如果在行驶的过程中需要转换 ...

  6. UVa 10491 奶牛和轿车（全概率公式）

    https://vjudge.net/problem/UVA-10491 题意: 假设有a头牛,b辆车,在最终选择前主持人会替你打开c个有牛的门,输出"总是换门"的策略下,赢得车的 ...

  7. hdu 4745 Two Rabbits 区间DP

    http://acm.hdu.edu.cn/showproblem.php?pid=4745 题意: 有两只兔子Tom Jerry, 他们在一个用石头围城的环形的路上跳, Tom只能顺时针跳,Jerr ...

  8. hdu 1498 50 years, 50 colors 最小点覆盖

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  9. python 随机整数

    # Program to generate a random number between and # import the random module import random print(ran ...

  10. EF大数据批量添加性能问题

    前几天做一个批量发消息的功能,因为要向消息表中批量写入数据,用的EF框架的插入方法:不用不知道,一用吓一跳:就10000条数据就耗时好几分钟,对应追求用户体验的我来说这是极不能容忍的,后来改为拼接SQ ...