<!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. 小米范工具系列之二：小米范 web目录扫描器

    最新版本1.1,下载地址:http://pan.baidu.com/s/1c1NDSVe  文件名scandir,请使用java1.8运行 小米范web目录扫描器主要功能是探测web可能存在的目录及文 ...

  2. Day21 过滤器（Filter）

    day21     过滤器(Filter) 过滤器概述   1 什么是过滤器 过滤器JavaWeb三大组件之一,它与Servlet很相似!不它过滤器是用来拦截请求的,而不是处理请求的. 当用户请求某个 ...

  3. windos 查看指定端口，将指定进程杀死

    >netstat -aon | findstr “80″ Proto   Local Address           Foreign Address         State        ...

  4. Linux 安装配置 Nginx

    前言 准备用flask做一个自己的博客网站,打算用Nginx来部署,所以在阿里云的服务器上安装Nginx,参考了很多教程,现在将步骤以及自己遇到的坑写下来,希望能对别人有所帮助. 我用的服务器是阿里云 ...

  5. 牛客国庆集训派对Day2 Solution

    A    矩阵乘法 思路: 1° 牛客机器太快了,暴力能过. #include <bits/stdc++.h> using namespace std; #define N 5000 in ...

  6. uva672

      Gangsters  N gangsters are going to a restaurant. The i-th gangster comes at the time Ti and has t ...

  7. Android ANR异常及解决方法

    1,首先是查看log: 2,再看trace.txt; 3,看源码: 4,仔细分析ANR的原.

  8. DB开发之oracle

    常用命令: select table_name from user_tables;  //当前用户的表 select table_name from all_tables;  //所有用户的表 sel ...

  9. [one day one question] iphone6 plus h5页面滑动莫名卡

    问题描述: iphone6 plus h5页面滑动莫名卡,这怎么破? 解决方案: 比较奇葩的问题,在找不到任何问题的情况下,可以考虑在下发现的解决方案,html,body未添加height: 100% ...

  10. 六.__FILE__ , __LINE__ 与调试日志

    很多人可能不知道,C\C++编译器提供了一套针对代码文件的宏定义,它们能够帮助开发者更好的定位代码的BUG. __FILE__ 该宏定义是一个字符串,存储着当前代码文件的完整路径 __LINE__ 该 ...