<!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. CCPC-Wannafly Winter Camp Day5 (Div2, onsite)

    Replay: Dup4: 时间复杂度算不对? 一点点思路不经过验证就激动的要死? 浪费自己一个小时还浪费别人一个小时? 对1e3不敏感? 1e3 * 1e3是多少? 模拟建边跑dp不写非要写个大模拟 ...

  2. EditPlus 4.3.2475 中文版已经发布（10月28日更新）

    新的修订版修复了上移多个插入点时会造成程序崩溃的问题.

  3. JAVA面试题整理（7）-Redis

    Redis面试题汇总 1.Redis用过哪些类型数据,以及Redis底层怎么实现 分析:是不是觉得这个问题很基础,其实我也这么觉得.然而根据面试经验发现,至少百分八十的人答不上这个问题.建议,在项目中 ...

  4. supervisor初试

    Supervisor (http://supervisord.org) 是一个用 Python 写的进程管理工具,可以很方便的用来启动.重启.关闭进程(不仅仅是 Python 进程).除了对单个进程的 ...

  5. Linux内核分析 03

    一,构造一个简单的Linux系统MenuOS 1.Linux内核源代码简介 回顾一下前面的三大法宝和两把宝剑. arch/x86目录下的代码需要重点关注 阅读代码的时候把除了x86以外的都删掉会有利于 ...

  6. 20145211《网络对抗》注入Shellcode并执行&&Return-to-libc攻击

    Shellcode注入 基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode的地址. ...

  7. 20145221 《Java程序设计》第三周学习总结

    20145221 <Java程序设计>第三周学习总结 教材学习内容总结 第四章部分已在假期完成,详见博客: <Java程序设计>第四章-认识对象 第五章部分 何谓封装 封装实际 ...

  8. InstallShield 2015 Premier的Basic MSI Project如何在卸载时删除残留的文件 (转)

    转载:http://blog.csdn.net/zztoll/article/details/54018615#comments 先说下缘由,我在用InstallShield 2015 Premier ...

  9. HBase表的备份

    HBase表备份其实就是先将Table导出,再导入两个过程. 导出过程 //hbase org.apache.hadoop.hbase.mapreduce.Driver export 表名 数据文件位 ...

  10. NOIP 2018退役祭

    Day 0 实在是没啥特别想干的...路上看了一下FE的小玉的第四周目的视频...然后到了之后整理了一下东西,然后被slr教着学了一下一个叫翻棋的东西,然后立刻就上瘾了...然后就听slr先生教我滑铁 ...