09, Vue - 글로벌 구성 요소의 슬롯 사용


<html>
	<head>
		<meta charset="utf-8">
		<title>      title>
		<style type="text/css">
			.default {
				display: inline-block;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				background: #fff;
				border: 1px solid #dcdfe6;
				color: #606266;
				-webkit-appearance: none;
				text-align: center;
				box-sizing: border-box;
				outline: none;
				margin: 0;
				transition: .1s;
				font-weight: 500;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				padding: 12px 20px;
				font-size: 14px;
				border-radius: 4px;
			}

			.primary {
				color: #fff;
				background-color: #409eff;
				border-color: #409eff;
			}

			.success {
				color: #fff;
				background-color: #67c23a;
				border-color: #67c23a;
			}
		style>
	head>
	<body>
		<div id="app">


		div>

	body>
	<script type="text/javascript" src="js/vue.min.js">

	script>

	<script type="text/javascript">
		//                      Vue.componet('    ',{template:``,})
		Vue.component('Vbtn', { //                      
			template: `
				
				
				
			`,
			props: ['type']
		});


		//         App   
		var Vheader = {
			data() {
				return {

				}
			},
			template: `
				
					      
					    
				
			`,
		};

		var Vaside = {
			data() {
				return {

				}
			},
			template: `
				
					       
					    
				
			`,
		}

		var Vcontent = {
			data() {
				return {

				}
			},
			template: `
				
					      
					
				
			`,
		}




		// 1、           data       ，          
		var App = {
			data() {
				return {

				}
			},
			template: `
				
					
					
						
						
							
						
					
				
				
			`,
			components: {
				Vheader,
				Vaside,
				Vcontent
			},
		};

		new Vue({
			el: "#app",
			data() {
				return {

				}
			},
			// 2、  
			components: {
				App
			},
			// 3、  
			template: ``,
		});
	script>
html>
09, Vue - 글로벌 구성 요소의 슬롯 사용

좋은 웹페이지 즐겨찾기
