<!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. SQL基础--查询之三--嵌套查询

    SQL基础--查询之三--嵌套查询

  2. vue知识总汇

    学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础

  3. android(十五) FTP的两种工作模式

    (一)PORT(主动)方式的连接过程是:客户端向服务器的FTP端口(默认是21)发送连接请求,服务器接受连接,建立一条命令链 当需要传送数据时,客户端在命令链路上用 PORT命令告诉服务器:“我打开了 ...

  4. 数据库触发器，禁止DDL操作

    CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREAT ...

  5. springboot 使用model重定向到html模板，对数据进行展示

    1:使用springboot, ,html使用thymeleaf,nekohtml模板 在build.gradle中添加依赖 buildscript { repositories { mavenCen ...

  6. 《TP5.0学习笔记---模型篇》

    https://blog.csdn.net/self_realian/article/details/78596261 一.什么是模型 为什么我们要在项目中使用模型,其实我们知道,我们可以直接在控制器 ...

  7. Selenium IDE脚本录制步骤简介

    录制脚本步骤: 1.打开Selenium IDE,输入需要录制脚本的地址,然后启动Firefox,输入selenium IDE需录制的地址,根据实际需求,做相关操作: 2.录制过程中,会发现做的相关操 ...

  8. java基础语法 List

    List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引, ArrayList:底层的数据结构使用的是数组结构(数组长度是可 ...

  9. 6.1 Controllers -- Introduction

    一.Controllers 1. 在Ember.js中,controllers允许你使用展现逻辑装饰你的models.通常,models将会有保存到服务器的属性,然而controllers将会有不需要 ...

  10. 服务器环境配置nginx / php / php-fpm（一）

    登陆,升级应用,查询和关闭selinux yum update getenforce setenforce 0 vi /etc/selinux 添加非root用户 adduser deploy pas ...