<!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. ruby中的**

    在ruby中,**是乘方的意思.它是一个右结合性的运算.如下: 在多个乘方的时候,会先进行后面的乘方运算,结果作为指数再与前一位进行乘方运算.

  2. VS2010/MFC编程入门之十五（对话框：一般属性页对话框的创建及显示）

    属性页对话框包括向导对话框和一般属性页对话框两类,上一节鸡啄米讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的 ...

  3. hdu 5185 动态规划 分析降低复杂度

    这题说的是 x[1]+x[2]+x[3]+…+x[n]=n, 这里 0 <= x[i] <= n && 1 <= i <= n x[i] <= x[i+1 ...

  4. 根据Excel文件中的内容，修改指定文件夹下的文件名称

    问题:根据Excel文件中内容,把文件名称由第2列,改为第1列.比如:把文件“123.jpg”修改为“1.jpg”.

  5. Python笔记 #17# Pandas: Merge

    10 Minutes to pandas Concat df = pd.DataFrame(np.random.randn(10, 4)) print(df) # break it into piec ...

  6. CSS3：{*zoom:1;}作用

    CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的 ...

  7. 安装Git【转】

    本文转载自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 最早Git是在Linu ...

  8. TCGA系列--TCGA可视化数据库GEPIA

    中国大牛力作  张泽民: http://gepia.cancer-pku.cn/index.html http://cancer-pku.cn/

  9. Vi/Vim三种模式

    命令模式,底线命令模式,输入模式:

  10. php 二维数组

    <?php // 一个二维数组 $cars=array ( array(,), array(,), array(,) ); ?>