<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>组件之使用内容分发slot构建bootstrap面板panel</title>

		<script src="vue.js"></script>

		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	</head>

	<body>

		<div id="hdcms">

			<form action="" class="form-horizontal">

				<bs-panel>

					<h4 slot="title">hdp开元框架</h4>

					<bs-input title="标题" value="蓝天科技" slot="body"></bs-input>

					<bs-input title="点击数" value="100" slot="body"></bs-input>

					abc

				</bs-panel>

			</form>

		</div>

		<script typeof="text/x-template" id="bsPanel">

			<div class="panel panel-default">

				<div class="panel-heading">

					<h3 class="panel-title">

					<slot name="title"></slot>

				</h3>

				</div>

				<div class="panel-body">

                	<slot name="body"></slot>

			</div>

					<h1>

					<slot></slot>

				</h1>

			</div>

		</script>

		<script typeof="text/x-template" id="bsInput">

			<div class="form-group">

				<label for="" class="col-sm-2 control-label">{{title}}</label>

					<div class="col-sm-10">

						<input type="text" class="form-control" :value="value"/>

				</div>

			</div>

		</script>

		<script>

			var bsPanel = {

				template: "#bsPanel"

			};

			var bsInput={

                template: "#bsInput",

				props:['title','value']

			}

			new Vue({

				el: "#hdcms",

				components: {bsPanel,bsInput},

			});

		</script>

	</body>

</html>

　　

044——VUE中组件之使用内容分发slot构建bootstrap面板panel的更多相关文章

  1. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  2. Vue内容分发slot

    前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web ...

  3. Vue 内容分发slot

    1.概述 内容分发:混合父组件的内容与子组件自己的模板. 2.单个插槽 当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在  ...

  4. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  5. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  6. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  7. Vue中组件化编码使用（实战练习一）

    Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...

  8. 如何让vue自定义组件可以包裹内容，并且渲染出来，以及组件的组合使用

    当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓    ...

  9. 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SSL默认端口时，用http://ip:port/访问出错（转）

    add by zhj: 其实就是保证https访问的port与服务器监听的port是同一port 原文:http://blog.csdn.net/ikmb/article/details/386370 ...

  2. centos7 安装Mariadb

    MariaDB 数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用 GPL 授权许可.开发这个分支的原因之一是:甲骨文公司收购了 MySQL 后,有将 MySQL 闭源的潜在风险,因 ...

  3. 【转】Deep Learning（深度学习）学习笔记整理系列之（二）

    因为我们要学习的是特征的表达,那么关于特征,或者说关于这个层级特征,我们需要了解地更深入点.所以在说Deep Learning之前,我们有必要再啰嗦下特征(呵呵,实际上是看到那么好的对特征的解释,不放 ...

  4. jenkins下搭建c++持续集成环境

      运行环境为centos 5.8 1.下载tomcat,并解压 2.下载jenkins,把jenkins.war放到tomcat的webapp目录下 3.在tomcat的bin目录下执行./star ...

  5. Java 和 Python 解析动态 key 的 JSON 数据

    一.概述 解析JSON过程中,什么情况都可能遇到.遇到特殊的情况,不会怎么办?肯定不是设计的问题,一定是你的姿势不对. 有这样一种JSON需要解析: { "b3444533f6544&quo ...

  6. 26QTimer定时器的使用

    前面介绍过定时器事件(QTimerEvent),有个弊端,就是每启动一个定时器都要对应的ID.本次介绍在设计器中使用Qtimer. 首先在设计器中添加一个LCD Number,和两个按钮. 头文件 # ...

  7. EF Code First 学习笔记:约定配置（转）

      要更改EF中的默认配置有两个方法,一个是用Data Annotations(在命名空间System.ComponentModel.DataAnnotations;),直接作用于类的属性上面;还有一 ...

  8. INNODB存储引擎表空间

    这片文章主要是对innodb表空间的一些说明: innodb中表空间可以分为以下几种: 系统表空间 独立表空间 undo表空间 临时表空间(temporary tablespace) 通用表空间(ge ...

  9. PHP多进程学习(三)__代码案例来了解父进程与子进程的执行顺序

    pcntl_fork创建子进程成功的话,系统就有了2个进程,一个为父进程,一个为子进程,父进程和子进程都继续向下执行,子进程的id号为$pid(父进程会获取子进程的$pid也就是$pid不为0,而子进 ...

  10. 20145118 《Java程序设计》第5周学习总结 教材学习内容总结

    20145118 <Java程序设计>第5周学习总结 教材学习内容总结 1.Java中所有错误都会被打包成对象,可以通过try.catch语法对错误对象作处理,先执行try,如果出错则跳出 ...