<!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. 获取access_token示例代码

    文档中心--百度AI-百度AI开放平台 http://ai.baidu.com/docs#/NLP-API/top #include <iostream> #include <cur ...

  2. Linux学习-->如何通过Shell脚本实现发送邮件通知功能？

    1.安装和配置sendmail 不需要注册公网域名和MX记录(不需要架设公网邮件服务器),通过Linux系统自带的mail命令即可对公网邮箱发送邮件.不过mail命令是依赖sendmail的,所以我们 ...

  3. HDU2426:Interesting Housing Problem(还没过，貌似入门题）

    #include <iostream> #include <queue> #include <stdio.h> #include <string.h> ...

  4. PAT 1075 PAT Judge[比较]

    1075 PAT Judge (25 分) The ranklist of PAT is generated from the status list, which shows the scores ...

  5. 转:CentOS设置程序开机自启动的方法

    转自:http://www.centos.bz/2011/09/centos-setup-process-startup-boot/ 1.把启动程序的命令添加到/etc/rc.d/rc.local文件 ...

  6. Jenkins时区设置

    系统管理->脚本命令行 System.setProperty('org.apache.commons.jelly.tags.fmt.timeZone', 'Asia/Shanghai')

  7. 数据结构顺序表Java实现

    Java实现顺序表算法:1:首先我们需要定义我们的接口,关于顺序表的一些基本的操作:顺序表中的操作都有增删改查. //List接口 public interface IList { //返回线性表的大 ...

  8. Educational Codeforces Round 57 Solution

    A. Find Divisible 签到. #include <bits/stdc++.h> using namespace std; int t, l, r; int main() { ...

  9. ac自动机系列

    hdu2222这题说的是在一个1000000的长串中找出n个短串是否在其中出现过 最后输出在长串中出现的个数 #include <iostream> #include <cstdio ...

  10. python webdriver grid多节点运行webdriver程序

    grid整理: 机制 Hub机器和节点机器上要装jdk和jar包 A机器:hub  中控:用来监控所有节点机的状态 启动命令: java -jar selenium-server-standalone ...