vue---2

1—vue组件定义声明3种方式
2—动态组件
3-----移动端布局
4----组件嵌套
第一种：

	<!-- 组件的思想，其实就是前端模块化/工程化的基础。把前端页面分成一个个模块，每一个模块就称为组件 -->
		<div id="app">
			<!-- 占位符英文即可，不能和标签名字冲突。一般需要有语义 -->
			<v-header></v-header>
			<v-nav></v-nav>
			
		</div>
		<script src="js/vue.js"></script>

		<script>
			// 定义组件
			var vheader=Vue.extend({
				// 定义模板，类似于之前的el。书写所要渲染的标签
				// 只能有一个根组件
				template:'<div><h1>{{msg}}</h1> <p>这是内容</p></div>',
				// 组件内部的数据类似之前的data 但是组件内部的数据需要书写成data(){return}函数形式
				data(){
					return {
						msg:'这是头部'
					}
				},
				// 组件可以有自己的方法
				methods:{

				}
			})
			// 定义组件
			var vnav=Vue.extend({
				// 定义模板，类似于之前的el。书写所要渲染的标签
				template:'<h1>{{msg}}</h1>',
				// 组件内部的数据类似之前的data 但是组件内部的数据需要书写成data(){return}函数形式
				data(){
					return {
						msg:'这是导航'
					}
				},
				// 组件可以有自己的方法
				methods:{

				}
			})


			new Vue({
				el:'#app',
				// 挂载组件
				components:{
					// k:v  k代表的是占位符 v代表的是组件名字
					'v-header':vheader,
					'v-nav':vnav
				}
			})

		</script>

第二种：

<!-- #app父组件 -->
		<div id="app">
			<!-- 占位符英文即可，不能和标签名字冲突。一般需要有语义 -->
			<v-header></v-header>
		</div>

		<script src="js/vue.js"></script>
		<script>
			// 组件定义简写方式 
			// 组件类似于自己的实例化对象
			var vheader={
				template:'<h1 @click="add()">这是头部{{msg}}</h1>',
				data(){
					return {
						msg:0
					}
				},
				methods:{
					add(){
						this.msg++
					}
				}
			}
			new Vue({
				el:'#app',
				components:{
					'v-header':vheader
				}

			})
		</script>

第三种：

<div id="app">
			<!-- 占位符英文即可，不能和标签名字冲突。一般需要有语义 -->
			<v-header></v-header>
			<v-header></v-header>
		</div>
		<!-- 定义模板 其实就是组件对应的html部分。模板只能有一个根组件
			组件和模板通过id名连接
		 -->
		<template id="header">
			<div>
				<h1>这是头部</h1>
				<p>这是头部内容</p>
				<button @click="add()">按钮{{msg}}</button>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script>
			var vheader={
				template:'#header',
				data(){
					return {
						msg:0
					}
				},
				methods:{
					add(){
						this.msg++
					}
				}
			}
			new Vue({
				el:'#app',
				components:{
					'v-header':vheader
				}
			})
		</script>

2—动态组件

   <div id="app">
      
       <ul>
           <li><button @click="msg='headerss'">登陆</button></li>
           <li><button @click="msg='mun'">注册</button></li>
       </ul>
       <!-- 动态组件  :is绑定组件显示-->
      <component :is="msg"></component>
    </div>
    <template id="headers">
        <h3>登陆</h3>
    </template>
    
    <template id="account">
        <h4>注册</h4>
    </template>
</body>

<script src="vue.js"></script>
<script>


var headers={
    template:'#headers'
}
var account={
    template:'#account'
}

new Vue({
        el:'#app',
        data:{
            msg:'headerss'
        },
      
       components:{
           'headerss':headers,
           'mun':account
       }
    })
    </script>

3-----移动端布局

<!-- 移动端一定要加视口标签，否则页面会自动伸缩 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<!-- 
	宽度百分比，高度自适应
	100vw和屏幕一样宽
	100vh和屏幕一样高
 -->
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.left{
				width: 20%;
				height: 100vh;
				float: left;
				background:lime;
				/*设置滚动条*/
				overflow: auto;
			}
			.right{
				width: 80%;
				height: 100vh;
				float: right;background: pink;
				overflow: auto;
			}
			/*用于隐藏滚动条*/
			div::-webkit-scrollbar {
			  display: none;
			}
		</style>
		<div class="left">
			<ul>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
				<li>男装</li>
			</ul>
	</div>
		

4----组件嵌套

	<div id="app">
			<login></login>
		</div>
		<!-- 定义模板 -->
		<template id="login">
			<main>
				<ul>
					<li @click="msg='account'">360账号登录</li>
					<li @click="msg='message'">短信登录</li>
				</ul>
				<!-- is 是。。。 -->
				<component :is="msg"></component>
			</main>
		</template>
		<template id="account">
			<h1>这是账号登录信息</h1>
		</template>
		<template id="message">
			<h1>这是短信登录信息</h1>
		</template>
		<script src="js/vue.js"></script>
		<script>
			var account={
				template:'#account'
			}
			var message={
				template:'#message'
			}
			var  login={
				template:'#login',
				data(){
					return{
						msg:'account'
					}
				},
				components:{
					'account':account,
					'message':message
				}
			}
			
			new Vue({
				el:'#app',
				components:{
					'login':login
				}
			})
		</script>

4----父组件给子组件传参

<body>
		<!-- app父组件 login子组件 一般情况下 父子组件不能直接进行通信(传递参数) 
			父组件的值传递给子组件
			1、在占位符中  :a="fmsg" a子组件中需要接收的数据(自定义) fmsg父组件的数据
			2、在子组件中定义props属性 接收a的值  props:['a']
			3、在组件中可以直接使用a
		-->
		<div id="app">
			<h1 @click="change()">{{num}}</h1>
			<login :a="num" :c="c"></login>
		</div>
		<template id="login">
			<h1>这是登录页面{{a}}{{c}}</h1>
		</template>
		<script src="js/vue.js"></script>
		<script>
			var login={
				template:'#login',
				props:['a','c'],
				data(){
					return {
						msg:'这是子组件的数据'
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					num:'这是父组件的数据',
					c:'this is father'
				},
				components:{
					'login':login
				},
				methods:{
					change(){
						this.num+=1;
					}
				}
			})
		</script>
	</body>