zoukankan      html  css  js  c++  java
  • 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!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>
    

      

  • 相关阅读:
    04_Windows平台Spark开发环境构建
    Hadoop Streaming 使用及参数设置
    Kafka 及 PyKafka 的使用
    Database Subquery
    Miscellaneous
    Emacs
    算法归纳
    逆元求组合数
    Elasticsearch 原理
    Linux的内存分页管理【转】
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8243369.html
Copyright © 2011-2022 走看看