<!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. 2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) Solution

    A:Exam Solved. 温暖的签. #include<bits/stdc++.h> using namespace std; ; int k; char str1[maxn], st ...

  2. Qt信号和槽连接方式的选择

    看了下Qt的帮助文档,发现connect函数最后还有一个缺省参数. connect函数原型是这样的: QMetaObject::Connection QObject::connect(const QO ...

  3. MySQL基准测试工具--sysbench

    我们需要知道的是sysbench并不是一个压力测试工具,是一个基准测试工具.linux自带的版本比较低,我们需要自己安装sysbench. [root@test2 ~]# sysbench --ver ...

  4. JS文档DOM

      访问指定节点 通过document节点获取 document.getElementById(elementId) document.getElementsByName(elementName) d ...

  5. POJ 1170 Shopping Offers（完全背包+哈希）

    http://poj.org/problem?id=1170 题意:有n种花的数量和价格,以及m种套餐买法(套餐会便宜些),问最少要花多少钱. 思路:题目是完全背包,但这道题目不好处理的是套餐的状态, ...

  6. codeforces 300 div2 B.Pasha and Phone 容斥原理

    B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  7. [转]Cryengine渲染引擎剖析

    转篇Napoleon314 大牛的分析,排版好乱,见谅,耐心读,这是个好东西,注意看他自己的实现,是个技术狂人啊,Ogre焕发次时代的光芒啊~~~努力 ------------------------ ...

  8. Spring IOC 源码简单分析 01 - BeanFactory

    ### 准备 ## 目标 了解 Spring IOC 的基础流程 ## 相关资源 Offical Doc:http://docs.spring.io/spring/docs/4.3.9.RELEASE ...

  9. 递归--练习2--noi6261汉诺塔

    递归--练习2--noi6261汉诺塔 一.心得 先把递推公式写出来,会很简单的 二.题目 6261:汉诺塔问题 总时间限制:  1000ms 内存限制:  65536kB 描述 约19世纪末,在欧州 ...

  10. 利用JS将页面中包含“一个”字段值的元素改为红色

    document.body.innerHTML = document.body.innerHTML.replace(/一个/ig,"<span style='color: red;'& ...