<!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. 2017年浙江中医药大学程序设计竞赛 Solution

    训练地址 A: 树剖板子题 求最小值的时候要注意值是不是有负数,如果有,初值要置为$-INF$ #include <bits/stdc++.h> using namespace std; ...

  2. uva473

     Raucous Rockers  You just inherited the rights to n previously unreleased songs recorded by the pop ...

  3. Python的星号（*）和双星号（**）用法

    ①引言 在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法是在变量前加单个星号或两个星号,实现多参数的传人或变量的拆解. ②什么是星号变量 最初,星号变量是用在函数的参数传递上的 ...

  4. scss使用指南--每天一点

    我们平时都称之为 Sass,其实可分成sass和scss, 其中Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),以".sass"后缀为扩展名:而 SCSS ...

  5. windows10下如何进行源码编译安装tensorflow

    1.获取python3.5.x https://www.python.org/ftp/python/3.5.4/python-3.5.4-amd64.exe 2.安装python3.5.x,默认安装即 ...

  6. Helm - Error: cannot connect to Tiller

    helm2.9.1报错 [root@master ~]# helm version Client: &version.Version{SemVer:"v2.9.1", Gi ...

  7. Anaconda中常用的用法

    Anaconda中常用的用法 conda 是开源包(packages)和虚拟环境(environment)的管理系统. packages 管理: 可以使用 conda 来安装.更新 .卸载工具包 ,并 ...

  8. 【转载】linux fork死循环炸弹及其预防

    转自linux fork死循环炸弹及其预防 在Linux系统下执行这段代码 :(){ :|:& }:: 就会引起死机,一旦执行起来后,唯一的方法就是重启系统.实际上这段代码是一段无限递归代码, ...

  9. php 关联数组遍历

    <?php $age=array("); foreach($age as $x=>$x_value) { echo "Key=" . $x . ", ...

  10. [osg]osgDB的加载机制，使用3DS插件做参考（转，整理现有osgDB资料）

    参考:http://blog.sina.com.cn/s/blog_7cdaf8b60102uzu3.html http://blog.csdn.net/wang15061955806/article ...