<!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. Python开发【模块】：Concurrent

    concurrent 模块 回顾: 对于python来说,作为解释型语言,Python的解释器必须做到既安全又高效.我们都知道多线程编程会遇到的问题,解释器要留意的是避免在不同的线程操作内部共享的数据 ...

  2. 预训练模型与Keras.applications.models权重资源地址

    什么是预训练模型 简单来说,预训练模型(pre-trained model)是前人为了解决类似问题所创造出来的模型.你在解决问题的时候,不用从零开始训练一个新模型,可以从在类似问题中训练过的模型入手. ...

  3. python 面向对象 isinstance

    查看某个对象是否 这个类实例 是返回True 否则返回False class Foo(object): pass obj = Foo() class Boo(object): pass print(i ...

  4. PID参数调整的口诀

    PID参数调整的口诀:参数整定找最佳,从小到大顺序查先是比例后积分,最后再把微分加曲线振荡很频繁,比例度盘要放大曲线漂浮绕大湾,比例度盘往小扳曲线偏离回复慢,积分时间往下降曲线波动周期长,积分时间再加 ...

  5. docker——三剑客之Docker Compose

    编排(Orchestration)功能是复杂系统实现灵活可操作性的关键.特别是在Docker应用场景中,编排意味着用户可以灵活的对各种容器资源实现定义和管理. 作为Docker官方编排工具,Compo ...

  6. PR曲线 ROC曲线的 计算及绘制

    在linear model中,我们对各个特征线性组合,得到linear score,然后确定一个threshold,linear score < threshold 判为负类,linear sc ...

  7. Centos 7 无法上网的解决办法

      首先,鼠标右击桌面,点击“在终端中打开”.   然后如下图所示,输入:su,按回车后输入自己的root密码:注意,输密码的时候密码区域并不显示任何东西哦,自己输错了就多按几次backspace就行 ...

  8. uva1391 2-SAT 问题

    题意在大白书上. 有3 种工作 abc 大于等于平均年龄的可以去做a c 工作, 小于平均年龄的可以去做 bc , 同样转化为2 -sat 去做, 因为对于每个人也只有2 种情况可以作为选择 #inc ...

  9. PYPI 国内源

    搬砖自http://www.cnblogs.com/sunnydou/p/5801760.html 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学  ...

  10. StarUML激活

    感谢  http://blog.csdn.net/mergades/article/details/46662413 1,打开对应 mac版本的安装包位置,在对应目录/Applications/Sta ...